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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
<form class="mt-4">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
</div>
<img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
<div class="flex justify-between items-center">
<button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
<div>
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
</div>
</div>
</form>
</div>
</div>Composants associés
Composant du formulaire de paiement
Un composant de formulaire de paiement complexe, inspiré du papier/de l’impression avec des tons de bijou, conçu pour les sites de documentation/wiki, avec une réactivité totale et une prise en charge du mode sombre.
Brutalist_Grayscale_Checkout_Form
Un composant de formulaire de paiement complexe, de style brutaliste, avec une palette de couleurs en niveaux de gris, optimisé pour la présentation du portfolio. Offre un contraste élevé, des mises en page inhabituelles, une réactivité totale et une prise en charge du mode sombre.
Composant du formulaire de paiement
Un composant de formulaire de paiement propre, minimaliste et réactif avec une influence de la typographie suisse/internationale, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté aux interfaces financières et bancaires.