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.
HTML Code
<div class="min-h-screen bg-gray-900 flex items-center justify-center p-8">
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-2xl font-bold text-teal-400 mb-6 text-center">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-teal-300 text-sm font-semibold mb-2">Full Name</label>
<input type="text" id="name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="John Doe">
</div>
<div class="mb-4">
<label for="email" class="block text-teal-300 text-sm font-semibold mb-2">Email</label>
<input type="email" id="email" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="[email protected]">
</div>
<div class="mb-4">
<label for="card" class="block text-teal-300 text-sm font-semibold mb-2">Card Number</label>
<input type="text" id="card" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="XXXX-XXXX-XXXX-XXXX">
</div>
<div class="mb-4 flex space-x-4">
<div class="w-1/2">
<label for="expiry" class="block text-teal-300 text-sm font-semibold mb-2">Expiry Date</label>
<input type="text" id="expiry" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="MM/YY">
</div>
<div class="w-1/2">
<label for="cvv" class="block text-teal-300 text-sm font-semibold mb-2">CVV</label>
<input type="text" id="cvv" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="CVC">
</div>
</div>
<div class="mb-6">
<label for="address" class="block text-teal-300 text-sm font-semibold mb-2">Billing Address</label>
<textarea id="address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" rows="3" placeholder="Street, City, State, Zip"></textarea>
</div>
<button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">Pay Now</button>
</form>
</div>
</div>Composants associés
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.
Composant du formulaire de paiement Glassmorphism
Composant de formulaire de paiement Glassmorphism avec palette de couleurs Earth Tones, complexité modérée et conception réactive avec prise en charge du thème sombre. Convient à des fins de blog/contenu.
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.