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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
<input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
</div>
<div class="mb-4">
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
<input type="text" id="card-number" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label for="expiry-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
<input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
<input type="text" id="cvv" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
</div>
</div>
<div class="mb-6">
<label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
<select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
<option value="">Select Country</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<!-- Add more countries as needed -->
</select>
</div>
<button type="submit" class="w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 py-2 px-4 rounded-md shadow-md hover:bg-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">Pay Now</button>
</form>
</div>
</div>Composants associés
Composant du formulaire de paiement - Neumorphic Corporate Blues
Un composant de formulaire de paiement complexe et réactif avec un style de conception neumorphique, utilisant des tons bleus d’entreprise. Il prend en charge le mode sombre et convient aux sites Web d’entreprise.
Composant du formulaire de paiement Glassmorphism
Composant de formulaire de paiement Glassmorphism avec palette de couleurs Earth Tones, complexité modérée et conception réactive avec prise en charge du thème sombre. Convient à des fins de blog/contenu.
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.