<form class="block w-96 bg-white shadow-lg p-8 rounded-xl">
  <h3 class="text-base mb-4">Payment</h3>

  <div class="relative z-0 w-full mb-5">
    <input type="text" name="cc" placeholder=" " 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-indigo-600 border-gray-200 font-sans" />
    <label for="cc" class="absolute duration-200 top-3 -z-1 origin-0 text-gray-500 text-base">Card number</label>
  </div>

  <div class="grid grid-cols-2 gap-4">
    <div class="relative z-0 w-full mb-5">
      <input type="text" name="dd" placeholder=" " 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-indigo-600 border-gray-200 font-sans" />
      <label for="dd" class="absolute duration-200 top-3 -z-1 origin-0 text-gray-500 text-base">DD</label>
    </div>
    <div class="relative z-0 w-full mb-5">
      <input type="text" name="mm" placeholder=" " 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-indigo-600 border-gray-200 font-sans" />
      <label for="mm" class="absolute duration-200 top-3 -z-1 origin-0 text-gray-500 text-base">MM</label>
    </div>
  </div>
  
  <div class="relative z-0 w-full mb-5">
    <input type="text" name="cvv" placeholder=" " 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-indigo-600 border-gray-200 font-sans" />
    <label for="cvv" class="absolute duration-200 top-3 -z-1 origin-0 text-gray-500 text-base">CVV</label>
  </div>
  
  <button class="rounded-xl bg-indigo-600 mt-8 block text-center text-white px-4 py-2 text-sm">Pay now ($1,243)</button>
</form>

.-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;
}