Input Floating Label

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Floating Label Input -->
    <div class="relative">
      <input type="text" id="floating-input-name" placeholder=" " 
        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-md shadow-sm peer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-transparent" />
      <label for="floating-input-name" 
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-3">
        Full Name
      </label>
    </div>

    <!-- Floating Label Email Input -->
    <div class="relative">
      <input type="email" id="floating-input-email" placeholder=" " 
        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-md shadow-sm peer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-transparent" />
      <label for="floating-input-email" 
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-3">
        Email Address
      </label>
    </div>

    <!-- Floating Label Phone Input -->
    <div class="relative">
      <input type="tel" id="floating-input-phone" placeholder=" " pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-md shadow-sm peer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-transparent" />
      <label for="floating-input-phone" 
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-3">
        Phone (123-456-7890)
      </label>
      <p class="mt-1 text-xs text-gray-500">Format: 123-456-7890</p>
    </div>

    <!-- Floating Label Textarea -->
    <div class="relative">
      <textarea id="floating-textarea" rows="4" placeholder=" " 
        class="w-full px-4 py-3 bg-white border border-gray-300 rounded-md shadow-sm peer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-transparent"></textarea>
      <label for="floating-textarea" 
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-6 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-3">
        Message
      </label>
    </div>
  </div>
</section>