Komponente des Checkout-Formulars
Ein responsives Checkout-Formular mit glassmorphism-Design, mit mattglasähnlichen, durchscheinenden Elementen und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
<form class="mt-4">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
</div>
<img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
<div class="flex justify-between items-center">
<button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
<div>
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
</div>
</div>
</form>
</div>
</div>Verwandte Komponenten
Skeuomorphes monochromatisches komplexes Checkout-Formular
Ein komplexes, responsives skeuomorphes Checkout-Formular mit monochromatischem Design, das für ein Portfolio geeignet ist. Enthält Unterstützung für dunkle Designs mit Tailwind CSS. Verwendet Hintergründe mit Farbverlauf, subtile Schatten und Eingabefelder, die physischen Elementen ähneln.
Luxus-Checkout-Formular
Eine Checkout-Formularkomponente im Luxus-/Premium-Stil mit einem mehrfarbigen Verlaufshintergrund, ausgefeilter Typografie und raffinierten Elementen. Es wurde für Dokumentations-/Wiki-Seiten entwickelt, reagiert vollständig und unterstützt den Dunkelmodus.
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.