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.
HTML Code
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-900">
<div class="w-full max-w-md bg-gray-800 p-8 rounded-md shadow-md">
<h2 class="text-2xl font-bold text-white mb-6">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-white text-sm font-bold mb-2">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-4">
<label for="email" class="block text-white 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 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-4">
<label for="card" class="block text-white text-sm font-bold mb-2">Card Number</label>
<input type="text" id="card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-6">
<label for="expiry" class="block text-white text-sm font-bold mb-2">Expiry Date</label>
<input type="text" id="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
</div>
</form>
</div>
</div>Composants associés
Composant du formulaire de paiement
Un composant de formulaire de paiement réactif avec des couleurs vives et des micro-interactions, prenant en charge le thème sombre. Il comprend des sections pour l’adresse de livraison, les détails de paiement et le récapitulatif de la commande, le tout stylisé avec Tailwind CSS pour une expérience de commerce électronique complexe.
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é.
Composant du formulaire de paiement
Un composant de formulaire de paiement simple et réactif avec un design Glassmorphism, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.