Glassmorphism Checkout 양식 구성 요소

<div class="min-h-screen bg-stone-100 py-6 flex flex-col justify-center sm:py-12 dark:bg-stone-900">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-stone-400 to-stone-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-stone-800 dark:text-stone-200 backdrop-filter backdrop-blur-xl bg-opacity-20 dark:bg-opacity-10">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-100">Checkout Form</h1>
        </div>
        <div class="divide-y divide-stone-200">
          <div class="py-8 text-base leading-6 space-y-4 text-stone-700 sm:text-lg sm:leading-7 dark:text-stone-300">
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-Rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Email Address</label>
            </div>
            <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Card Number</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Expiry Date</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">CVV</label>
            </div>
            <div class="relative">
              <button class="bg-stone-600 text-white rounded-md px-6 py-2 dark:bg-stone-700">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>