Composant du formulaire de paiement
Un composant de formulaire de paiement complexe, inspiré du papier/de l’impression avec des tons de bijou, conçu pour les sites de documentation/wiki, avec une réactivité totale et une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un style monochrome noir et blanc, une couleur d’accentuation vive, des transitions dégradées et une prise en charge du mode sombre, adapté aux applications de sport/fitness.
Composant du formulaire de paiement
Composant de formulaire de paiement de conception matérielle avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Composant du formulaire de paiement - Soins de santé/Médical
Un composant de formulaire de paiement complexe et réactif avec un thème de conception à l’aquarelle doux et artistique, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux applications médicales et de soins de santé.