체크 아웃 양식 구성 요소
미니멀한 디자인, 풍부한 인터페이스, 트라이어드 색 구성표를 갖춘 반응형 체크아웃 양식으로 어두운 테마를 지원합니다.
HTML 코드
<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>