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.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex">
<!-- Shipping Address Section -->
<div class="md:w-1/2 p-6 sm:p-8">
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
Shipping Address
</div>
</h2>
<form class="space-y-5">
<div>
<label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Full Name</label>
<input type="text" id="fullName" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="John Doe">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Address</label>
<input type="text" id="address" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123 Main St">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">City</label>
<input type="text" id="city" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="Anytown">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">ZIP Code</label>
<input type="text" id="zip" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="12345">
</div>
</div>
</form>
</div>
<!-- Payment and Order Summary Section -->
<div class="md:w-1/2 p-6 sm:p-8 bg-indigo-50 dark:bg-gray-700">
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
Payment Details
</div>
</h2>
<form class="space-y-5 mb-8">
<div>
<label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Card Number</label>
<input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="XXXX-XXXX-XXXX-XXXX">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
<div class="sm:col-span-2">
<label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Expiry Date</label>
<input type="text" id="expiry" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="MM/YY">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">CVV</label>
<input type="text" id="cvv" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123">
</div>
</div>
</form>
<h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
Order Summary
</div>
</h2>
<div class="space-y-4 text-gray-700 dark:text-gray-300">
<div class="flex justify-between items-center">
<span>Subtotal</span>
<span class="font-semibold text-lg">$150.00</span>
</div>
<div class="flex justify-between items-center">
<span>Shipping</span>
<span class="font-semibold text-lg">$10.00</span>
</div>
<div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-600 pt-4">
<span class="text-xl font-bold">Total</span>
<span class="text-2xl font-extrabold text-green-600 dark:text-green-400">$160.00</span>
</div>
</div>
<button class="mt-8 w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300">
Place Order (🚀)
</button>
</div>
</div>
</div>
<style>
@keyframes fade-in-down {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 0.6s ease-out;
}
</style>Composants associés
Composant du formulaire de paiement
Un composant de formulaire de paiement réactif conçu avec une interface utilisateur en mode sombre et une palette de couleurs aux tons de bijoux, adapté aux plateformes de divertissement/médias. Comprend les détails de paiement et les sections récapitulatives.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un style monochrome noir et blanc, une couleur d’accentuation vive, des transitions dégradées et une prise en charge du mode sombre, adapté aux applications de sport/fitness.
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.