Label Floating

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

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

    <!-- Floating Label for Password -->
    <div class="relative">
      <input
        type="password"
        id="floating-password"
        placeholder=" "
        class="block w-full px-3 py-2.5 pt-4 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"
      />
      <label
        for="floating-password"
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-3 scale-75 top-3 z-10 origin-[0] left-3 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3 peer-focus:text-blue-600"
      >
        Password
      </label>
      <p class="mt-1 text-xs text-gray-500">
        Password must be at least 8 characters long
      </p>
    </div>
  </div>
</section>