Componente Modulo di Checkout
Un complesso componente del modulo di checkout ispirato alla carta/stampa con toni gioiello, progettato per siti di documentazione/wiki, caratterizzato da piena reattività e supporto per la modalità scura.
Codice 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>Componenti correlati
Componente Modulo di Checkout
Un componente del modulo di pagamento dal design minimalista e piatto per un portfolio, con toni della terra, design reattivo, supporto per la modalità oscura e molteplici elementi interattivi. Utilizza HTML e Tailwind CSS.
Componente Modulo di Checkout
Componente del modulo di checkout Material Design con combinazione di colori monocromatica per scopi di portfolio, reattivo con supporto per temi scuri.
Modulo di pagamento per il neumorfismo
Componente Modulo di pagamento per neumorfismo con combinazione di colori analoga per un sito Web Portfolio. Ha un design reattivo con supporto per la modalità oscura. Non è incluso alcun codice JavaScript, solo HTML con le classi Tailwind.