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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="John Doe">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="[email protected]">
</div>
<div class="mb-4">
<label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
<input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="123 Main St">
</div>
<div class="mb-4">
<label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
<input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Anytown">
</div>
<div class="mb-4">
<label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
<input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
</div>
<div class="mb-6">
<label for="card-number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Card Number</label>
<input type="text" id="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="**** **** **** ****">
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">
Submit Payment
</button>
</div>
</form>
</div>
</div>
</div>Composants associés
RetroVintage_CheckoutFormComponent
Formulaire de paiement rétro/vintage avec prise en charge des tons terreux, de la complexité modérée et du mode sombre
Composant du formulaire de paiement
Un composant de formulaire de paiement simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant du formulaire de paiement
Un formulaire de paiement en mode sombre avec des couleurs vives, une complexité modérée et un design réactif, adapté aux interfaces de médias sociaux.