RetroVintage_CheckoutFormComponent
Formulaire de paiement rétro/vintage avec prise en charge des tons terreux, de la complexité modérée et du mode sombre
HTML Code
<div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl font-mono">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout Information</h2>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="mb-4">
<label for="full_name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
<input type="text" id="full_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your full name">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</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 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email address">
</div>
</div>
<div class="mb-4">
<label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
<input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your address">
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="mb-4">
<label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
<input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your city">
</div>
<div class="mb-4">
<label for="state" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">State</label>
<input type="text" id="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your state">
</div>
<div class="mb-4">
<label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
<input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your zip code">
</div>
</div>
<div class="mb-6">
<label for="card_number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Credit Card Number</label>
<input type="text" id="card_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your credit card number">
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="mb-6">
<label for="expiry_date" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Expiry Date</label>
<input type="text" id="expiry_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/YY">
</div>
<div class="mb-6">
<label for="cvv" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">CVV</label>
<input type="text" id="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="CVV">
</div>
<div class="mb-6">
<label for="country" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Country</label>
<input type="text" id="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your country">
</div>
</div>
<div class="flex items-center justify-between">
<button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-green-800 dark:hover:bg-green-900" type="button">
Submit Payment
</button>
</div>
</form>
</div>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 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.
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.