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.
HTML Code
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-900">
<div class="w-full max-w-md bg-gray-800 p-8 rounded-md shadow-md">
<h2 class="text-2xl font-bold text-white mb-6">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-white text-sm font-bold mb-2">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-4">
<label for="email" class="block text-white text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-4">
<label for="card" class="block text-white text-sm font-bold mb-2">Card Number</label>
<input type="text" id="card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-6">
<label for="expiry" class="block text-white text-sm font-bold mb-2">Expiry Date</label>
<input type="text" id="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
</div>
</form>
</div>
</div>Composants associés
Composant du formulaire de paiement
Un composant de formulaire de paiement minimaliste et plat pour un portfolio, avec des tons de terre, un design réactif, la prise en charge du mode sombre et de multiples éléments interactifs. Utilise HTML et Tailwind CSS.
Composant du formulaire de paiement
Un composant de formulaire de paiement complexe et réactif avec les principes de conception matérielle, la palette de couleurs en niveaux de gris et la prise en charge du mode sombre, mis en œuvre à l’aide de Tailwind CSS pour les interfaces de médias sociaux.
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.