체크 아웃 양식 구성 요소
보석 색조의 복잡한 종이/인쇄에서 영감을 받은 결제 양식 구성 요소로, 문서/위키 사이트용으로 설계되었으며, 완전한 응답성과 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="bg-gradient-to-br from-emerald-50 to-teal-100 p-4 sm:p-6 md:p-8 min-h-screen dark:from-slate-900 dark:to-emerald-950">
<!-- Paper Container -->
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden md:flex md:before:content-[''] md:before:absolute md:before:inset-0 md:before:bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] dark:bg-slate-800 dark:shadow-2xl dark:shadow-emerald-900 border border-t-8 border-gem-blue-500 relative dark:border-gem-blue-700">
<!-- Left Fold / Navigation -->
<div class="md:w-1/3 p-6 bg-gem-navy-800 text-gem-gold-100 flex flex-col justify-between dark:bg-gem-navy-900 border-r border-gem-navy-700">
<div>
<h2 class="text-2xl font-serif mb-4 text-gem-gold-200">Order Summary</h2>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center">
<span>Product Name One</span>
<span>$19.99</span>
</li>
<li class="flex justify-between items-center">
<span>Product Name Two</span>
<span>$29.99</span>
</li>
<li class="flex justify-between items-center">
<span>Shipping</span>
<span>$5.00</span>
</li>
<li class="flex justify-between items-center font-bold border-t border-gem-navy-700 pt-3 mt-3">
<span>Total</span>
<span>$54.98</span>
</li>
</ul>
<div class="mt-8">
<h3 class="text-lg font-serif mb-3 text-gem-gold-200">Order Progress</h3>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gem-emerald-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-emerald-600">1</div>
<span class="text-gem-gold-500">Personal Details</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gem-sapphire-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-sapphire-600">2</div>
<span class="text-gem-gold-500">Shipping Address</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gem-ruby-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-ruby-600">3</div>
<span class="text-gem-gold-500">Payment Information</span>
</div>
<div class="flex items-center opacity-60">
<div class="w-8 h-8 rounded-full bg-gray-500 flex items-center justify-center text-gray-900 font-bold text-sm mr-3">4</div>
<span>Review & Confirm</span>
</div>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-gem-navy-700 text-xs text-gem-gold-300">
<p>© 2023 Acme Corp. All rights reserved.</p>
<p class="mt-1">Documentation & Support</p>
</div>
</div>
<!-- Right Page / Form Content -->
<div class="md:w-2/3 p-6 sm:p-8 bg-gem-gold-50 dark:bg-slate-850 dark:text-gray-200 relative">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-[0.03] dark:opacity-5"></div>
<div class="relative z-10">
<h1 class="text-3xl sm:text-4xl font-serif text-gem-ruby-700 mb-6 dark:text-gem-ruby-400">Checkout Details</h1>
<form class="space-y-6">
<!-- Personal Details -->
<fieldset>
<legend class="text-xl font-serif text-gem-emerald-700 mb-4 pb-2 border-b border-gem-emerald-200 dark:text-gem-emerald-400 dark:border-gem-emerald-700">1. Personal Details</legend>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="first_name" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">First Name</label>
<input type="text" id="first_name" name="first_name" autocomplete="given-name" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400 placeholder-gem-sapphire-400" placeholder="John">
</div>
<div>
<label for="last_name" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Last Name</label>
<input type="text" id="last_name" name="last_name" autocomplete="family-name" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400" placeholder="Doe">
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400" placeholder="[email protected]">
</div>
</div>
</fieldset>
<!-- Shipping Address -->
<fieldset>
<legend class="text-xl font-serif text-gem-sapphire-700 mb-4 pb-2 border-b border-gem-sapphire-200 dark:text-gem-sapphire-400 dark:border-gem-sapphire-700">2. Shipping Address</legend>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="address_line1" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Address Line 1</label>
<input type="text" id="address_line1" name="address_line1" autocomplete="address-line1" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="123 Main St">
</div>
<div>
<label for="address_line2" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Address Line 2 (Optional)</label>
<input type="text" id="address_line2" name="address_line2" autocomplete="address-line2" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="Apt, Suite, Etc.">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="Anytown">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">State / Province</label>
<input type="text" id="state" name="state" autocomplete="address-level1" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="CA">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">ZIP / Postal Code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="90210">
</div>
</div>
<div>
<label for="country" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Country</label>
<select id="country" name="country" autocomplete="country-name" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent appearance-none bg-no-repeat bg-right-center pr-10 dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" style="background-image: url('data:image/svg+xml;utf8,<svg fill="%234F46E5" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/%3E%3C/svg%3E'); background-size: 1.5rem;">
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
</select>
</div>
</div>
</fieldset>
<!-- Payment Information -->
<fieldset>
<legend class="text-xl font-serif text-gem-ruby-700 mb-4 pb-2 border-b border-gem-ruby-200 dark:text-gem-ruby-400 dark:border-gem-ruby-700">3. Payment Information</legend>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="card_number" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Card Number</label>
<input type="text" id="card_number" name="card_number" autocomplete="cc-number" placeholder="XXXX XXXX XXXX XXXX" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="sm:col-span-2">
<label for="expiry_date" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Expiry Date (MM/YY)</label>
<input type="text" id="expiry_date" name="expiry_date" autocomplete="cc-exp" placeholder="MM/YY" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc" placeholder="123" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
</div>
</div>
</div>
</fieldset>
<div class="flex justify-end pt-4">
<button type="submit" class="bg-gem-ruby-600 text-gem-gold-50 py-3 px-8 rounded-full font-bold shadow-lg hover:bg-gem-ruby-700 focus:outline-none focus:ring-4 focus:ring-gem-ruby-300 transition duration-300 ease-in-out dark:bg-gem-ruby-700 dark:hover:bg-gem-ruby-800 dark:focus:ring-gem-ruby-500">
Complete Order
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Custom Colors for Jewel Tones (define in your tailwind.config.js) -->
<style>
.text-gem-gold-100 { color: #fdf5e6; }
.text-gem-gold-200 { color: #fcf1d8; }
.text-gem-gold-300 { color: #f7e0b5; }
.text-gem-gold-50 { color: #fffefb; /* Nearly white for contrast */ }
.bg-gem-gold-50 { background-color: #fffefb; /* Nearly white for contrast */ }
.text-gem-emerald-700 { color: #065F46; }
.bg-gem-emerald-500 { background-color: #10B981; }
.border-gem-emerald-200 { border-color: #A7F3D0; }
.border-gem-emerald-300 { border-color: #6EE7B7; }
.focus-ring-gem-emerald-500 { --tw-ring-color: #10B981; }
.dark\:text-gem-emerald-400 { color: #4ade80; }
.dark\:border-gem-emerald-600 { border-color: #059669; }
.dark\:focus\:ring-gem-emerald-400 { --tw-ring-color: #4ade80; }
.dark\:bg-gem-emerald-600 { background-color: #059669; }
.dark\:border-gem-emerald-700 { border-color: #047857; }
.text-gem-sapphire-700 { color: #1e3a8a; }
.bg-gem-sapphire-500 { background-color: #3B82F6; }
.border-gem-sapphire-200 { border-color: #BFDBFE; }
.border-gem-sapphire-300 { border-color: #93C5FD; }
.focus-ring-gem-sapphire-500 { --tw-ring-color: #3B82F6; }
.dark\:text-gem-sapphire-400 { color: #60a5fa; }
.dark\:border-gem-sapphire-600 { border-color: #2563eb; }
.dark\:focus\:ring-gem-sapphire-400 { --tw-ring-color: #60a5fa; }
.dark\:bg-gem-sapphire-600 { background-color: #2563eb; }
.dark\:border-gem-sapphire-700 { border-color: #1d4ed8; }
.text-gem-ruby-700 { color: #991B1B; }
.bg-gem-ruby-500 { background-color: #EF4444; }
.bg-gem-ruby-600 { background-color: #DC2626; }
.hover\:bg-gem-ruby-700:hover { background-color: #B91C1C; }
.border-gem-ruby-200 { border-color: #FECACA; }
.border-gem-ruby-300 { border-color: #FCA5A5; }
.focus-ring-gem-ruby-300 { --tw-ring-color: #FECACA; }
.focus-ring-gem-ruby-500 { --tw-ring-color: #EF4444; }
.dark\:text-gem-ruby-400 { color: #F87171; }
.dark\:border-gem-ruby-600 { border-color: #DC2626; }
.dark\:focus\:ring-gem-ruby-400 { --tw-ring-color: #F87171; }
.dark\:bg-gem-ruby-700 { background-color: #B91C1C; }
.dark\:hover\:bg-gem-ruby-800:hover { background-color: #991B1B; }
.dark\:focus\:ring-gem-ruby-500 { --tw-ring-color: #EF4444;}
.bg-gem-navy-800 { background-color: #1E293B; }
.dark\:bg-gem-navy-900 { background-color: #0F172A; }
.border-gem-navy-700 { border-color: #334155; }
.border-gem-blue-500 { border-color: #3B82F6; }
.dark\:border-gem-blue-700 { border-color: #1D4ED8; }
</style>
</div>관련 구성 요소
체크 아웃 양식 구성 요소
Tailwind CSS를 사용하여 구축된 Glassmorphism 디자인, 단색 색 구성표 및 어두운 테마 지원을 갖춘 간단하고 반응이 빠른 체크아웃 양식 구성 요소입니다.
스큐어모픽 단색 복합 체크 아웃 양식
포트폴리오에 적합한 단색 디자인의 복잡하고 반응이 빠른 스큐어모픽 결제 양식입니다. Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다. 그라데이션 배경, 미묘한 그림자 및 물리적 요소와 유사한 입력 필드를 사용합니다.
체크 아웃 양식 구성 요소
Neumorphism 디자인, 단색 색 구성표, 다크 모드 지원 및 이미지 플레이스홀더가 있는 간단하고 반응이 빠른 체크아웃 양식 구성 요소입니다.