검색 구성 요소

카테고리

구성 요소 체크 아웃 양식

체크 아웃 양식

구매 프로세스 완료를 위한 양식

장난기 넘치는 Checkout 양식 구성 요소

단순하고 장난기 넘치며 반응이 빠른 체크아웃 양식 구성 요소로, 둥근 요소와 차분한 색상이 있어 직업/경력 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.

                <div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8">
      <div class="text-center mb-6 sm:mb-8">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-2 font-['Inter',sans-serif]">Yay! Let's Get Started</h2>
        <p class="text-gray-500 dark:text-gray-400 text-lg sm:text-xl">Complete your registration</p>
      </div>

      <form class="space-y-5 sm:space-y-6">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
          <input type="text" id="full-name" placeholder="Jane Doe" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email-address" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
          <input type="password" id="confirm-password" placeholder="Repeat your password" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform transition duration-200 ease-in-out hover:scale-105 active:scale-95">
          <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          Complete Registration!
        </button>
      </form>

      <div class="mt-6 text-center text-sm">
        <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-150 ease-in-out">Sign In Here!</a></p>
      </div>
    </div>
    <div class="bg-blue-100 dark:bg-gray-900 py-4 px-6 sm:px-8 text-center text-gray-600 dark:text-gray-400 text-sm border-t border-blue-200 dark:border-gray-700">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
    </div>
  </div>
</div>

아르 데코 체크 아웃 양식

아르데코 디자인 스타일의 복잡하고 반응이 빠른 체크아웃 양식 구성 요소로, 기하학적 패턴과 오션/블루 톤의 고급스러운 스타일이 특징입니다. 전문 컨설팅/서비스를 위해 설계되었으며 완전한 다크 모드를 지원합니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-blue-950 to-blue-700 dark:from-gray-950 dark:to-blue-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out scale-100 hover:scale-[1.01] border-4 border-blue-600 dark:border-blue-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-800 via-sky-600 to-blue-800 dark:from-blue-900 dark:via-blue-700 dark:to-blue-900"></div>
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-blue-800 via-sky-600 to-blue-800 dark:from-blue-900 dark:via-blue-700 dark:to-blue-900"></div>
    
    <div class="p-6 sm:p-8 lg:p-10 relative z-10">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center text-blue-900 dark:text-sky-400 mb-8 sm:mb-10 tracking-wider drop-shadow-lg leading-tight">
        <span class="block">Finalize Your <span class="text-blue-600 dark:text-blue-400">Consultation</span></span>
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10">

        <!-- Left Column: Order Summary / Service Details -->
        <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-6 shadow-inner border border-blue-200 dark:border-gray-600">
          <h3 class="text-2xl font-semibold text-blue-800 dark:text-sky-300 mb-5 relative pb-3 border-b-2 border-blue-300 dark:border-gray-600">
            Service Details
            <span class="absolute bottom-[-2px] left-0 w-1/4 h-[2px] bg-sky-500"></span>
          </h3>
          <dl class="space-y-4 text-blue-900 dark:text-gray-200">
            <div class="flex justify-between items-center">
              <dt class="font-medium">Service Package:</dt>
              <dd class="text-lg font-bold text-blue-700 dark:text-sky-400">Premium Business Strategy</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Consultant:</dt>
              <dd class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Consultant John Doe" class="w-8 h-8 rounded-full border-2 border-sky-500 dark:border-sky-400">
                <span>John Doe</span>
              </dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Planned Date:</dt>
              <dd>October 26, 2024</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Duration:</dt>
              <dd>3 Hours</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Base Price:</dt>
              <dd>$1,500.00</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Taxes (7%):</dt>
              <dd>$105.00</dd>
            </div>
            <div class="flex justify-between items-center border-t-2 border-blue-400 dark:border-blue-600 pt-4 font-bold text-xl">
              <dt class="text-blue-900 dark:text-sky-300">Total Amount:</dt>
              <dd class="text-blue-800 dark:text-sky-400">$1,605.00</dd>
            </div>
          </dl>
        </div>

        <!-- Right Column: Payment & Billing Details -->
        <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-6 shadow-inner border border-blue-200 dark:border-gray-600">
          <h3 class="text-2xl font-semibold text-blue-800 dark:text-sky-300 mb-5 relative pb-3 border-b-2 border-blue-300 dark:border-gray-600">
            Payment Information
            <span class="absolute bottom-[-2px] left-0 w-1/4 h-[2px] bg-sky-500"></span>
          </h3>
          <form class="space-y-6">
            <div>
              <label for="card-number" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Card Number</label>
              <input type="text" id="card-number" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="_ _ _ _  _ _ _ _  _ _ _ _  _ _ _ _">
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="exp-date" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Exp. Date</label>
                <input type="text" id="exp-date" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">CVV</label>
                <input type="text" id="cvv" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="123">
              </div>
            </div>
            <div>
              <label for="card-name" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Name on Card</label>
              <input type="text" id="card-name" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="John D. Smith">
            </div>
            <div>
              <label for="billing-address" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Billing Address</label>
              <input type="text" id="billing-address" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="123 Main St"> 
            </div>
            <div class="flex items-center justify-between text-blue-800 dark:text-gray-200 text-sm">
              <div class="flex items-center">
                <input id="save-card" name="save-card" type="checkbox" class="h-4 w-4 text-sky-600 border-blue-300 dark:border-gray-600 rounded focus:ring-sky-500">
                <label for="save-card" class="ml-2 block text-blue-800 dark:text-gray-200">Save card details</label>
              </div>
              <a href="#" class="text-sky-600 hover:text-sky-800 dark:text-sky-400 dark:hover:text-sky-300 font-medium transition duration-200 ease-in-out">Forgot something?</a>
            </div>
            <button type="submit" class="w-full py-4 px-6 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600 text-white font-bold rounded-lg shadow-lg text-xl tracking-wide transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-700 relative overflow-hidden">
              <span class="relative z-10">Confirm Booking & Pay</span>
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer transition-all duration-300"></div>
            </button>
          </form>
        </div>
      </div>

      <!-- Footer Note -->
      <div class="mt-10 text-center text-blue-800 dark:text-gray-300 text-sm sm:text-base">
        <p>&copy; <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-300 font-semibold">Art Deco Consulting</a> 2024. All rights reserved. Your data is secured with 256-bit encryption.</p>
      </div>

    </div>
  </div>
</div>

<style>
  /* Custom animations for Art Deco shimmer effect on button */
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .animate-shimmer {
    animation: shimmer 1.5s infinite;
  }
</style>

체크 아웃 양식 구성 요소

생생한 색상과 마이크로 인터랙션이 있는 반응형 체크아웃 양식 구성 요소로, 어두운 테마를 지원합니다. 여기에는 배송 주소, 결제 세부 정보 및 주문 요약에 대한 섹션이 포함되어 있으며, 모두 복잡한 전자 상거래 경험을 위해 Tailwind CSS로 스타일이 지정되었습니다.

열다 미리 보기

                <div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex">
    <!-- Shipping Address Section -->
    <div class="md:w-1/2 p-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          Shipping Address
        </div>
      </h2>
      <form class="space-y-5">
        <div>
          <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Full Name</label>
          <input type="text" id="fullName" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="John Doe">
        </div>
        <div>
          <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Address</label>
          <input type="text" id="address" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123 Main St">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">City</label>
            <input type="text" id="city" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="Anytown">
          </div>
          <div>
            <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">ZIP Code</label>
            <input type="text" id="zip" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="12345">
          </div>
        </div>
      </form>
    </div>

    <!-- Payment and Order Summary Section -->
    <div class="md:w-1/2 p-6 sm:p-8 bg-indigo-50 dark:bg-gray-700">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
          Payment Details
        </div>
      </h2>
      <form class="space-y-5 mb-8">
        <div>
          <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Card Number</label>
          <input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="XXXX-XXXX-XXXX-XXXX">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
          <div class="sm:col-span-2">
            <label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Expiry Date</label>
            <input type="text" id="expiry" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="MM/YY">
          </div>
          <div>
            <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">CVV</label>
            <input type="text" id="cvv" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123">
          </div>
        </div>
      </form>

      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Order Summary
        </div>
      </h2>
      <div class="space-y-4 text-gray-700 dark:text-gray-300">
        <div class="flex justify-between items-center">
          <span>Subtotal</span>
          <span class="font-semibold text-lg">$150.00</span>
        </div>
        <div class="flex justify-between items-center">
          <span>Shipping</span>
          <span class="font-semibold text-lg">$10.00</span>
        </div>
        <div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-600 pt-4">
          <span class="text-xl font-bold">Total</span>
          <span class="text-2xl font-extrabold text-green-600 dark:text-green-400">$160.00</span>
        </div>
      </div>

      <button class="mt-8 w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300">
        Place Order (&#x1F680;)
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out;
  }
</style>

체크 아웃 양식 구성 요소

포트폴리오를 위한 미니멀한 플랫 디자인 체크아웃 양식 구성 요소로, 흙색, 반응형 디자인, 다크 모드 지원 및 여러 대화형 요소를 특징으로 합니다. HTML 및 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 sm:p-8 lg:p-10 w-full max-w-md">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center">Checkout</h2>

    <!-- Progress Stepper -->
    <div class="flex justify-between items-center mb-8">
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">1</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Shipping</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">2</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Payment</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">3</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Review</p>
      </div>
    </div>

    <!-- Shipping Information Form -->
    <form>
      <div class="mb-4">
        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
        <input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="John Doe">
      </div>

      <div class="mb-4">
        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
        <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="1234 Main St">
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
        <div>
          <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
          <input type="text" id="city" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Anytown">
        </div>
        <div>
          <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
          <input type="text" id="state" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="CA">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div>
          <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postal Code</label>
          <input type="text" id="zip" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="12345">
        </div>
        <div>
          <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Country</label>
          <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            <option>United States</option>
            <option>Canada</option>
            <option>Mexico</option>
            <option>Other</option>
          </select>
        </div>
      </div>

      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out">
        Continue to Payment
      </button>
    </form>

    <!-- Product Summary (Example, can be expanded) -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Order Summary</h3>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
        <span class="text-gray-800 dark:text-gray-100">$99.00</span>
      </div>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Shipping:</span>
        <span class="text-gray-800 dark:text-gray-100">$7.00</span>
      </div>
      <div class="flex justify-between font-bold text-lg border-t border-gray-300 dark:border-gray-600 pt-2 mt-4">
        <span class="text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-gray-800 dark:text-gray-100">$106.00</span>
      </div>
    </div>

  </div>
</div>

스큐어모픽 단색 복합 체크 아웃 양식

포트폴리오에 적합한 단색 디자인의 복잡하고 반응이 빠른 스큐어모픽 결제 양식입니다. Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다. 그라데이션 배경, 미묘한 그림자 및 물리적 요소와 유사한 입력 필드를 사용합니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="max-w-2xl w-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 rounded-xl shadow-2xl p-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Complete Your Order</h2>

    <form>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="relative">
          <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
          <input type="text" id="firstName" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="John">
        </div>

        <div class="relative">
          <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
          <input type="text" id="lastName" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="Doe">
        </div>
      </div>

      <div class="mb-6">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="[email protected]">
      </div>

      <div class="mb-6">
        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Shipping Address</label>
        <input type="text" id="address" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="123 Main St">
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div>
          <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
          <input type="text" id="city" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="Anytown">
        </div>
        <div>
          <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">State</label>
          <input type="text" id="state" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="CA">
        </div>
        <div>
          <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
          <input type="text" id="zip" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="90210">
        </div>
      </div>

      <div class="mb-6">
        <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Credit Card Number</label>
        <input type="text" id="cardNumber" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="**** **** **** ****">
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div>
          <label for="expiryDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
          <input type="text" id="expiryDate" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="MM/YY">
        </div>
        <div>
          <label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVC</label>
          <input type="text" id="cvc" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="123">
        </div>
        <div class="flex items-end">
          <img src="https://www.picsum.photos/id/1084/100/60" alt="Credit Card Placeholder" class="rounded-lg shadow-md">
        </div>
      </div>

      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-xl transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
        Place Order
      </button>
    </form>
  </div>
</div>

체크 아웃 양식 구성 요소

Neumorphism 디자인, 단색 색 구성표, 다크 모드 지원 및 이미지 플레이스홀더가 있는 간단하고 반응이 빠른 체크아웃 양식 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="relative px-4 py-10 bg-white dark:bg-gray-700 mx-8 md:mx-0 shadow-lg rounded-lg sm:p-10">
      <div class="max-w-md mx-auto">
        <div class="flex items-center space-x-5">
          <div class="h-14 w-14 bg-gray-200 dark:bg-gray-600 rounded-full flex flex-shrink-0 justify-center items-center text-gray-500 dark:text-gray-400 text-2xl font-mono"></div>
          <div class="block pl-2 font-semibold text-xl self-start text-gray-700 dark:text-gray-200">
            <h2 class="leading-relaxed">Checkout</h2>
          </div>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-600">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:opacity-100 ease-in-out">
            <div class="flex flex-col">
              <label class="leading-loose">Full Name</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="John Doe">
            </div>
            <div class="flex flex-col">
              <label class="leading-loose">Card Number</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="1234 5678 9012 3456">
            </div>
            <div class="flex items-center space-x-4">
              <div class="flex flex-col">
                <label class="leading-loose">Expiry</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="MM/YY">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="flex flex-col">
                <label class="leading-loose">CVV</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="123">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a2 2 0 00-2-2H8a2 2 0 00-2 2v3m6 0v-3"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pt-4 flex items-center space-x-4">
            <button class="flex justify-center items-center w-full text-gray-900 dark:text-gray-100 px-4 py-3 rounded-md focus:outline-none bg-gray-200 dark:bg-gray-600 shadow-md hover:bg-gray-300 dark:hover:bg-gray-700">
              Checkout
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

체크 아웃 양식 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 체크아웃 양식 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-6 bg-gray-900">
  <div class="w-full max-w-md bg-gray-800 p-8 rounded-md shadow-md">
    <h2 class="text-2xl font-bold text-white mb-6">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-white text-sm font-bold mb-2">Name</label>
        <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-white text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-4">
        <label for="card" class="block text-white text-sm font-bold mb-2">Card Number</label>
        <input type="text" id="card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-6">
        <label for="expiry" class="block text-white text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
      </div>
    </form>
  </div>
</div>

체크 아웃 양식 구성 요소

머티리얼 디자인 원칙, 회색조 색 구성표 및 다크 모드 지원을 갖춘 복잡하고 반응이 빠른 체크아웃 양식 구성 요소로, 소셜 미디어 인터페이스용 Tailwind CSS를 사용하여 구현됩니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
        <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
        <input type="text" id="card-number" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
          <label for="expiry-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
          <input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
        </div>
        <div>
          <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
          <input type="text" id="cvv" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
        </div>
      </div>
      <div class="mb-6">
        <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
        <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
          <option value="">Select Country</option>
          <option value="us">United States</option>
          <option value="ca">Canada</option>
          <!-- Add more countries as needed -->
        </select>
      </div>
      <button type="submit" class="w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 py-2 px-4 rounded-md shadow-md hover:bg-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">Pay Now</button>
    </form>
  </div>
</div>

체크 아웃 양식 구성 요소

미니멀한 디자인, 풍부한 인터페이스, 트라이어드 색 구성표를 갖춘 반응형 체크아웃 양식으로 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Checkout</h2>
    <form class="mt-4">
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="address">Address</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="city">City</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="city" placeholder="Your City" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="state">State</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="state" placeholder="Your State" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="zip">ZIP Code</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="zip" placeholder="12345" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
        </div>
        <div class="mb-4 flex justify-between">
            <div class="w-1/2 mr-2">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="w-1/2 ml-2">
                <label class="block text-gray-700 dark:text-gray-300" for="cvc">CVC</label>
                <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvc" placeholder="123" required>
            </div>
        </div>
        <div class="mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" id="terms" required>
                <span class="text-gray-700 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <button type="submit" class="w-full mt-4 p-2 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-300">Complete Purchase</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Summary</h3>
        <ul class="mt-2 text-gray-600 dark:text-gray-400">
            <li>Item 1 - $29.99</li>
            <li>Item 2 - $49.99</li>
            <li>Total - $79.98</li>
        </ul>
    </div>
</div>

미니멀리스트 그레이스케일 체크아웃 양식

Tailwind CSS를 사용하여 다크 모드를 지원하는 비즈니스/기업 웹사이트를 위한 복잡하고 반응이 빠른 그레이스케일, 미니멀리스트 체크아웃 양식입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-xl shadow-lg">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Checkout
      </h2>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="first-name" class="sr-only">First Name</label>
          <input id="first-name" name="first-name" type="text" autocomplete="given-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="First Name">
        </div>
        <div>
          <label for="last-name" class="sr-only">Last Name</label>
          <input id="last-name" name="last-name" type="text" autocomplete="family-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Last Name">
        </div>
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Email address">
        </div>
        <div>
          <label for="address" class="sr-only">Address</label>
          <input id="address" name="address" type="text" autocomplete="street-address" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Address">
        </div>
        <div>
          <label for="city" class="sr-only">City</label>
          <input id="city" name="city" type="text" autocomplete="address-level2" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="City">
        </div>
        <div>
          <label for="state" class="sr-only">State / Province</label>
          <input id="state" name="state" type="text" autocomplete="address-level1" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="State / Province">
        </div>
        <div>
          <label for="zip" class="sr-only">Zip / Postal Code</label>
          <input id="zip" name="zip" type="text" autocomplete="postal-code" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Zip / Postal Code">
        </div>
      </div>

      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="card-number" class="sr-only">Card Number</label>
          <input id="card-number" name="card-number" type="text" autocomplete="cc-number" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Card Number">
        </div>
        <div class="flex -space-x-px">
          <div class="w-1/2">
            <label for="expiration-date" class="sr-only">Expiration Date (MM/YY)</label>
            <input id="expiration-date" name="expiration-date" type="text" autocomplete="cc-exp" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Expiration Date (MM/YY)">
          </div>
          <div class="w-1/2">
            <label for="cvc" class="sr-only">CVC</label>
            <input id="cvc" name="cvc" type="text" autocomplete="cc-csc" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="CVC">
          </div>
        </div>
        <div>
          <label for="card-name" class="sr-only">Name on Card</label>
          <input id="card-name" name="card-name" type="text" autocomplete="cc-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Name on Card">
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
          Pay Now
        </button>
      </div>
    </form>
  </div>
</div>