Composant du formulaire de paiement
Un composant de formulaire de paiement minimaliste et plat pour un portfolio, avec des tons de terre, un design réactif, la prise en charge du mode sombre et de multiples éléments interactifs. Utilise HTML et Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-8 flex items-center justify-center font-sans">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 sm:p-8 lg:p-10 w-full max-w-md">
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center">Checkout</h2>
<!-- Progress Stepper -->
<div class="flex justify-between items-center mb-8">
<div class="text-center">
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">1</div>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Shipping</p>
</div>
<div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
<div class="text-center">
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">2</div>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Payment</p>
</div>
<div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
<div class="text-center">
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">3</div>
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Review</p>
</div>
</div>
<!-- Shipping Information Form -->
<form>
<div class="mb-4">
<label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
<input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="John Doe">
</div>
<div class="mb-4">
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
<input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="1234 Main St">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
<input type="text" id="city" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Anytown">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
<input type="text" id="state" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="CA">
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postal Code</label>
<input type="text" id="zip" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="12345">
</div>
<div>
<label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Country</label>
<select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
<option>Other</option>
</select>
</div>
</div>
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out">
Continue to Payment
</button>
</form>
<!-- Product Summary (Example, can be expanded) -->
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Order Summary</h3>
<div class="flex justify-between mb-2">
<span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
<span class="text-gray-800 dark:text-gray-100">$99.00</span>
</div>
<div class="flex justify-between mb-2">
<span class="text-gray-600 dark:text-gray-400">Shipping:</span>
<span class="text-gray-800 dark:text-gray-100">$7.00</span>
</div>
<div class="flex justify-between font-bold text-lg border-t border-gray-300 dark:border-gray-600 pt-2 mt-4">
<span class="text-gray-800 dark:text-gray-100">Total:</span>
<span class="text-gray-800 dark:text-gray-100">$106.00</span>
</div>
</div>
</div>
</div>Composants associés
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un design glassmorphism, avec des éléments translucides semblables à du verre dépoli et une prise en charge du mode sombre.
Composant du formulaire de paiement
Un composant de formulaire de paiement simple et réactif avec la conception Neumorphism, la palette de couleurs monochromatiques, la prise en charge du mode sombre et des espaces réservés aux images.
Composant du formulaire de paiement
Un composant de formulaire de paiement complexe et réactif avec les principes de conception matérielle, la palette de couleurs en niveaux de gris et la prise en charge du mode sombre, mis en œuvre à l’aide de Tailwind CSS pour les interfaces de médias sociaux.