Composant de formulaire de paiement ludique
Un composant de formulaire de paiement simple, ludique et réactif avec des éléments arrondis et des couleurs sourdes, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
<div class="p-6 sm:p-8">
<div class="text-center mb-6 sm:mb-8">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-2 font-['Inter',sans-serif]">Yay! Let's Get Started</h2>
<p class="text-gray-500 dark:text-gray-400 text-lg sm:text-xl">Complete your registration</p>
</div>
<form class="space-y-5 sm:space-y-6">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
<input type="text" id="full-name" placeholder="Jane Doe" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
</div>
<div>
<label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email-address" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
<input type="password" id="password" placeholder="Minimum 8 characters" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
<input type="password" id="confirm-password" placeholder="Repeat your password" class="mt-1 block w-full px-4 py-2 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition duration-150 ease-in-out sm:text-base">
</div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transform transition duration-200 ease-in-out hover:scale-105 active:scale-95">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Complete Registration!
</button>
</form>
<div class="mt-6 text-center text-sm">
<p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition duration-150 ease-in-out">Sign In Here!</a></p>
</div>
</div>
<div class="bg-blue-100 dark:bg-gray-900 py-4 px-6 sm:px-8 text-center text-gray-600 dark:text-gray-400 text-sm border-t border-blue-200 dark:border-gray-700">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</div>Composants associés
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 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.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un style monochrome noir et blanc, une couleur d’accentuation vive, des transitions dégradées et une prise en charge du mode sombre, adapté aux applications de sport/fitness.