Composant du formulaire de paiement
Un composant de formulaire de paiement simple et réactif avec un design Glassmorphism, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex justify-center items-center">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl p-8 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-8">Checkout Form</h2>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Full Name</label>
<input type="text" id="name" name="name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div>
<label for="card" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Card Number</label>
<input type="text" id="card" name="card" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div class="flex space-x-4">
<div class="w-1/2">
<label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Expiry Date</label>
<input type="text" id="expiry" name="expiry" placeholder="MM/YY" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div class="w-1/2 swansoft-form-group">
<label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-200">CVC</label>
<input type="text" id="cvc" name="cvc" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">
Submit Payment
</button>
</div>
</form>
</div>
</div>Composants associés
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
Composant du formulaire de paiement
Un composant de formulaire de paiement simple et réactif avec la conception Neumorphism, la palette de couleurs monochromatiques, la prise en charge du mode sombre et des espaces réservés aux images.
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.