Komponente des Checkout-Formulars - Neumorphic Corporate Blues
Eine komplexe, reaktionsschnelle Checkout-Formularkomponente mit einem neumorphen Designstil unter Verwendung von Unternehmensblautönen. Es unterstützt den Dunkelmodus und ist für Business-/Unternehmenswebsites geeignet.
HTML-Code
<div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-800 font-sans">
<div class="w-full max-w-4xl bg-blue-100 dark:bg-gray-700 rounded-xl shadow-xl p-8 transition-all duration-300 transform
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
shadow-[inset_5px_5px_10px_rgba(174,174,192,0.6),inset_-5px_-5px_10px_rgba(255,255,255,0.8)]">
<h2 class="text-3xl font-bold text-blue-800 dark:text-blue-300 mb-8 text-center">
Secure Checkout
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Payment Information Section -->
<div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Payment Details</h3>
<div class="space-y-4">
<!-- Card Number -->
<div>
<label for="card-number" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Number</label>
<input type="text" id="card-number" placeholder="•••• •••• •••• ••••" maxlength="19" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<!-- Card Name -->
<div>
<label for="card-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Holder Name</label>
<input type="text" id="card-name" placeholder="John Doe" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div class="grid grid-cols-2 gap-4">
<!-- Expiration Date -->
<div>
<label for="exp-date" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Expiry Date</label>
<input type="text" id="exp-date" placeholder="MM/YY" maxlength="5" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<!-- CVV -->
<div>
<label for="cvv" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">CVV</label>
<input type="text" id="cvv" placeholder="•••" maxlength="3" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
</div>
<!-- Payment Options -->
<div class="mt-6">
<h4 class="text-md font-semibold text-blue-700 dark:text-blue-400 mb-3">Choose Payment Method</h4>
<div class="flex flex-wrap gap-4">
<button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
bg-blue-200 dark:bg-gray-900
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
transition-all duration-200 text-sm">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-12-6L4 8h16l-8 4-8-4z"/></svg>
Credit Card
</button>
<button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
bg-blue-200 dark:bg-gray-900
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
transition-all duration-200 text-sm">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.47-7-7.39h5L10 9l3 3.01L14.99 12H19c0 4.87-3.93 8.8-8 8.93V19z"/></svg>
PayPal
</button>
</div>
</div>
</div>
</div>
<!-- Order Summary / Billing Address Section -->
<div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Billing Address</h3>
<div class="space-y-4">
<div>
<label for="full-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Full Name</label>
<input type="text" id="full-name" placeholder="Jane Doe" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div>
<label for="address" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Address</label>
<input type="text" id="address" placeholder="123 Main St" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">City</label>
<input type="text" id="city" placeholder="Anytown" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Zip Code</label>
<input type="text" id="zip" placeholder="12345" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
</div>
<div>
<label for="country" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Country</label>
<select id="country" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]">
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
<option value="DE">Germany</option>
<!-- Add more countries as needed -->
</select>
</div>
</div>
</div>
</div>
<!-- Order Summary Footer -->
<div class="mt-8 p-6 rounded-xl bg-blue-50 dark:bg-gray-800
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-4">Order Summary</h3>
<div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
<span>Subtotal</span>
<span>$200.00</span>
</div>
<div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
<span>Shipping</span>
<span>$15.00</span>
</div>
<div class="flex justify-between items-center text-blue-700 dark:text-blue-100 font-bold text-xl mt-4 pt-4 border-t border-blue-200 dark:border-gray-600">
<span>Total</span>
<span>$215.00</span>
</div>
<button type="submit" class="w-full mt-8 p-4 rounded-xl
bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700
text-white font-bold text-lg
shadow-[5px_5px_10px_rgba(0,0,0,0.2),-5px_-5px_10px_rgba(255,255,255,0.7)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.8),-5px_-5px_10px_rgba(255,255,255,0.1)]
hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.6)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.9),inset_-2px_-2px_5px_rgba(255,255,255,0.05)]
transition-all duration-300 transform active:scale-98">
Place Order
</button>
</div>
</div>
</div>Verwandte Komponenten
Minimalistisches Graustufen-Checkout-Formular
Ein komplexes, reaktionsschnelles, minimalistisches Graustufen-Checkout-Formular für Geschäfts-/Unternehmenswebsites mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.
Komponente des Checkout-Formulars
Eine reaktionsschnelle Komponente für das Checkout-Formular mit lebendigen Farben und Mikrointeraktionen, die dunkles Design unterstützt. Es enthält Abschnitte für die Lieferadresse, die Zahlungsdetails und die Bestellübersicht, die alle mit Tailwind CSS für ein komplexes E-Commerce-Erlebnis gestaltet sind.
Komponente des Checkout-Formulars
Eine einfache, reaktionsschnelle Checkout-Formularkomponente mit Glassmorphism-Design, monochromatischem Farbschema und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.