Form Floating Label Using Tailwind UI

<style>
  /* css floating standard */
  .-z-1 {
    z-index: -1;
  }

  .origin-0 {
    transform-origin: 0%;
  }

  input:focus~label,
  input:not(:placeholder-shown)~label,
  textarea:focus~label,
  textarea:not(:placeholder-shown)~label,
  select:focus~label,
  select:not([value='']):valid~label {
    /* @apply transform; scale-75; -translate-y-6; */
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-scale-x: 0.75;
    --tw-scale-y: 0.75;
    --tw-translate-y: -1.5rem;
  }

  input:focus~label,
  select:focus~label {
    /* @apply text-black; left-0; */
    --tw-text-opacity: 1;
    color: rgba(0, 0, 0, var(--tw-text-opacity));
    left: 0px;
  }

  /* css floating outline */
  #outlined {
    transform: translateY(-50%);
  }

  .empty input:not(:focus)+#outlined {
    top: 50%;
    transform: translateY(-50%);
    color: rgb(121, 121, 121);
  }

  /* css floating filled */

  .relative {
    position: relative;
  }

  .floating-label {
    transition: all 0.2s ease-in-out;
    transform-origin: 0% 100%;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
  }

  .input-wrapper:focus-within .floating-label,
  .input-wrapper input:not(:placeholder-shown)+.floating-label {
    font-size: 1rem;
    transform: translate(5px, -110%) scale(0.75);
    top: 1.5rem;
    left: 0;
  }
</style>

<h1 class="text-center font-bold pt-10 text-3xl mb-4 text-gray-800">Form Floating Label</h1>
<div class="w-full md:max-w-2xl mx-auto p-4 md:p-8 rounded-xl space-y-4 flex flex-col mb-16">

  <h2 class="text-lg font-medium mb-2 text-gray-600">Floating standard</h2>
  <form class="w-full mx-auto bg-white rounded-lg shadow-md p-6">
    <div class="relative z-0 w-full mb-5">
      <input type="text" name="name" placeholder=" " required
        class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200" />
      <label for="name" class="absolute duration-300 top-3 -z-1 origin-0 text-gray-500">Enter name</label>
      <span class="text-sm text-red-600 hidden" id="error">Name is required</span>
    </div>

    <div class="relative z-0 w-full">
      <input type="email" name="email" placeholder=" " required
        class="pt-3 pb-2 block w-full px-0 mt-0 bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 focus:border-black border-gray-200" />
      <label for="email" class="absolute duration-300 top-3 -z-1 origin-0 text-gray-500">Enter email</label>
      <span class="text-sm text-red-600 hidden" id="error">Email is required</span>
    </div>
  </form>

  <h2 class="text-lg font-medium mb-2 text-gray-600">Floating outline</h2>
  <form class="w-full mx-auto bg-white rounded-lg shadow-md p-6">
    <div class="relative h-10 w-full input-component mb-5 empty sm:inline-block sm:pr-1">
      <input id="name" type="text" name="name" class="h-full w-full border-gray-300 p-4 transition-all hover:border-gray-500 focus:border-green-500
        rounded-md focus:ring-0 group focus:outline-0 border text-base" />
      <label id="outlined" for="name" class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
        Enter name
      </label>
    </div>

    <div class="relative h-10 w-full input-component empty sm:inline-block sm:pr-1">
      <input id="email" type="email" name="email" class="h-full w-full border-gray-300 p-4 transition-all hover:border-gray-500 focus:border-green-500
        rounded-md focus:ring-0 group focus:outline-0 border text-base" />
      <label id="outlined" for="email"
        class="absolute left-2 transition-all bg-white px-1 text-green-600 text-xs top-0">
        Enter email
      </label>
    </div>
  </form>

  <h2 class="text-lg font-medium mb-2 text-gray-600">Floating filled</h2>
  <form class="w-full mx-auto bg-white rounded-lg shadow-md p-6">
    <div class="relative input-wrapper mb-5">
      <input type="text" id="floating_filled"
        class="block rounded-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        placeholder=" " />
      <label for="floating_filled"
        class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform floating-label">Enter
        name</label>
    </div>
    <div class="relative input-wrapper">
      <input type="email" id="floating_filled"
        class="block rounded-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
        placeholder=" " />
      <label for="floating_filled"
        class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform floating-label">Enter
        email</label>
    </div>
  </form>
</div>