체크 아웃 양식 구성 요소
스위스/국제 타이포그래피 디자인 영향, 차분한 색 구성표 및 다크 모드 지원을 갖춘 깨끗하고 미니멀하며 반응이 빠른 결제 양식 구성 요소로 금융 및 은행 인터페이스에 적합합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-800 transition-colors duration-300">
<div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 tracking-tight leading-tight mb-2">
<span class="text-blue-600 dark:text-blue-400">Secure</span> Checkout
</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">Please fill in your details to complete your secure transaction.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 md:p-8">
<div class="lg:col-span-2 space-y-6">
<!-- Contact Information -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
<!-- Shipping Address -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Address</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="John" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</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" name="address" placeholder="123 Main St" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-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" name="city" placeholder="Springfield" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</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" name="state" placeholder="IL" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postcode</label>
<input type="text" id="zip" name="zip" placeholder="62704" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
<!-- Payment Information -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
<div class="mb-4">
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label>
<input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="expiration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiration Date</label>
<input type="text" id="expiration" name="expiration" placeholder="MM/YY" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVC</label>
<input type="text" id="cvc" name="cvc" placeholder="CVC" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="sm:col-span-1">
<label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name on Card</label>
<input type="text" id="card-name" name="card-name" placeholder="John Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
</div>
<!-- Order Summary / Cart Details -->
<aside class="lg:col-span-1 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 p-6 pt-8 lg:p-6 lg:pt-0">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Order Summary</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
<div>
<p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Premium Finance Course</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
</div>
</div>
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$199.00</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/seed/product2/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
<div>
<p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Financial Planning Toolkit</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
</div>
</div>
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$49.00</span>
</div>
</div>
<div class="mt-6 space-y-2 border-t border-gray-200 dark:border-gray-700 pt-6">
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Subtotal</span>
<span>$248.00</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Tax (8%)</span>
<span>$19.84</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Shipping</span>
<span>Free</span>
</div>
<div class="flex justify-between font-bold text-lg text-gray-800 dark:text-gray-100 pt-2">
<span>Total</span>
<span>$267.84</span>
</div>
</div>
<button type="submit" class="mt-8 w-full bg-blue-600 text-white py-3 px-4 rounded-md font-semibold text-base shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Complete Purchase
</button>
<p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
Your information is secured with <span class="font-medium text-green-600 dark:text-green-400">256-bit encryption</span>.
</p>
</aside>
</div>
</div>
</div>관련 구성 요소
체크 아웃 양식 구성 요소
포트폴리오를 위한 미니멀한 플랫 디자인 체크아웃 양식 구성 요소로, 흙색, 반응형 디자인, 다크 모드 지원 및 여러 대화형 요소를 특징으로 합니다. HTML 및 Tailwind CSS를 사용합니다.
장난기 넘치는 Checkout 양식 구성 요소
단순하고 장난기 넘치며 반응이 빠른 체크아웃 양식 구성 요소로, 둥근 요소와 차분한 색상이 있어 직업/경력 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.