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
Composant du formulaire de paiement
Un composant de formulaire de paiement minimaliste et plat pour les outils CRM/professionnels, avec une palette de couleurs chaudes de coucher de soleil et une réactivité totale avec la prise en charge du mode sombre.
Composant du formulaire de paiement - Soins de santé/Médical
Un composant de formulaire de paiement complexe et réactif avec un thème de conception à l’aquarelle doux et artistique, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux applications médicales et de soins de santé.
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.