Label Floating Sizes

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-lg mx-auto space-y-6">
    <!-- Extra Small Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-xs"
        placeholder=" "
        class="block w-full px-2.5 py-1 pt-3 text-xs 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-xs"
        class="absolute text-xs text-gray-500 duration-300 transform -translate-y-2 scale-75 top-1.5 z-10 origin-[0] left-2.5 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-2 peer-focus:text-blue-600"
      >
        Extra Small
      </label>
    </div>

    <!-- Small Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-sm"
        placeholder=" "
        class="block w-full px-3 py-1.5 pt-4 text-sm 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-sm"
        class="absolute text-sm text-gray-500 duration-300 transform -translate-y-2.5 scale-75 top-2 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-2.5 peer-focus:text-blue-600"
      >
        Small
      </label>
    </div>

    <!-- Medium Floating Label (Default) -->
    <div class="relative">
      <input
        type="text"
        id="floating-md"
        placeholder=" "
        class="block w-full px-3 py-2 pt-4.5 text-base 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-md"
        class="absolute text-base text-gray-500 duration-300 transform -translate-y-3 scale-75 top-2.5 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"
      >
        Medium (Default)
      </label>
    </div>

    <!-- Large Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-lg"
        placeholder=" "
        class="block w-full px-4 py-2.5 pt-5 text-lg 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-lg"
        class="absolute text-lg text-gray-500 duration-300 transform -translate-y-3.5 scale-75 top-3 z-10 origin-[0] left-4 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-3.5 peer-focus:text-blue-600"
      >
        Large
      </label>
    </div>

    <!-- Extra Large Floating Label -->
    <div class="relative">
      <input
        type="text"
        id="floating-xl"
        placeholder=" "
        class="block w-full px-4 py-3 pt-6 text-xl 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-xl"
        class="absolute text-xl text-gray-500 duration-300 transform -translate-y-4 scale-75 top-3.5 z-10 origin-[0] left-4 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 peer-focus:text-blue-600"
      >
        Extra Large
      </label>
    </div>
  </div>
</section>