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
Complexe monochromatique skeuomorphe Formulaire de paiement
Un formulaire de paiement skeuomorphe complexe et réactif au design monochromatique, adapté à un portfolio. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des arrière-plans dégradés, des ombres subtiles et des champs de saisie qui ressemblent à des éléments physiques.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un design minimaliste, une interface riche et une palette de couleurs triadiques, prenant en charge le thème sombre.
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.