LuxuryCheckoutForm
Un composant de formulaire de paiement de style luxe/premium avec un arrière-plan dégradé multicolore, une typographie sophistiquée et des éléments raffinés. Conçu pour les sites de documentation/wiki, il est entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black">
<div class="w-full max-w-4xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl shadow-xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-gray-700">
<h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 mb-6 text-center tracking-tight">
Secure Checkout
</h2>
<p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto text-lg leading-relaxed">
Complete your premium experience. Your information is safe with us.
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Billing Information -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
Billing Information
</h3>
<form class="space-y-6">
<div>
<label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
<input type="text" id="fullName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="[email protected]">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
<input type="text" id="address" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123 Main St">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
<input type="text" id="city" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="New York">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
<input type="text" id="zip" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="10001">
</div>
<div>
<label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
<select id="country" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 transition duration-300 ease-in-out">
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
</select>
</div>
</div>
</form>
</div>
<!-- Payment Information -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
Payment Information
</h3>
<form class="space-y-6">
<div>
<label for="cardName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name on Card</label>
<input type="text" id="cardName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
</div>
<div>
<label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
<input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="●●●● ●●●● ●●●● 1234">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="expDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiration Date</label>
<input type="text" id="expDate" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="MM/YY">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
<input type="text" id="cvv" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123">
</div>
</div>
<!-- Order Summary (basic version) -->
<div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
<h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Order Summary</h4>
<div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
<span>Product Name</span>
<span>$99.00</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
<span>Tax</span>
<span>$5.00</span>
</div>
<div class="flex justify-between font-bold text-lg text-gray-900 dark:text-gray-50 border-t border-gray-300 dark:border-gray-600 pt-3 mt-3">
<span>Total</span>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500 dark:from-green-400 dark:to-blue-400">$104.00</span>
</div>
</div>
</form>
</div>
</div>
<div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex justify-center">
<button type="submit" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out font-semibold text-lg animate-gradient-xy focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
Place Order
</button>
</div>
<!-- Placeholder for an image in a luxury theme -->
<div class="mt-10 hidden sm:block">
<img src="https://picsum.photos/800/200?grayscale&blur=2" alt="Elegant Payment Iconography" class="w-full rounded-xl opacity-80 shadow-md" loading="lazy">
</div>
</div>
</div>
<style>
/* Custom keyframes for the gradient animation */
@keyframes gradient-xy {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animate-gradient-xy {
background-size: 400% 400%;
animation: gradient-xy 6s ease infinite;
}
</style>Composants associés
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.
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.
Formulaire de paiement Neumorphism
Composant Neumorphism Checkout Form avec une palette de couleurs analogue pour un site Web Portfolio. Il a un design réactif avec prise en charge du mode sombre. Aucun code JavaScript n’est inclus, seulement du HTML avec des classes Tailwind.