Composant du formulaire de paiement
Un composant de formulaire de paiement minimaliste et plat pour les outils CRM/professionnels, avec une palette de couleurs chaudes de coucher de soleil et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-orange-50 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6 sm:p-8 bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 text-white">
<h2 class="text-2xl sm:text-3xl font-bold mb-2">Checkout</h2>
<p class="text-orange-100 dark:text-orange-200">Please fill in your details to complete the purchase.</p>
</div>
<form class="p-6 sm:p-8 space-y-6">
<!-- Contact Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" autocomplete="tel"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
</div>
</div>
<!-- Shipping Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="full-name" name="full-name" autocomplete="name" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street Address</label>
<input type="text" id="address" name="address" autocomplete="street-address" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</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">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State/Province</label>
<input type="text" id="state" name="state" autocomplete="address-level1" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Zip/Postal Code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
</div>
</div>
</div>
<!-- Payment Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Card Number</label>
<input type="text" id="card-number" name="card-number" autocomplete="cc-number" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••• •••• •••• ••••">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="exp-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Expiration Date</label>
<input type="text" id="exp-date" name="exp-date" autocomplete="cc-exp" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="MM/YY">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••">
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="pt-4">
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-gray-800">
Complete Purchase
</button>
</div>
</form>
</div>
</div>Composants associés
Composant du formulaire de paiement
Composant de formulaire de paiement de conception matérielle avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.
Formulaire de paiement Art Déco
Un composant de formulaire de paiement complexe et réactif avec un style de design Art Déco, avec des motifs géométriques et un style luxueux dans les tons océan/bleu. Conçu pour le conseil/les services professionnels, avec une prise en charge complète du mode sombre.
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.