Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif conçu dans un style brutaliste avec une palette de couleurs pastel et adapté aux sites Web d’affaires/d’entreprise. Il prend en charge le mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="email" id="email" placeholder="Your Email" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
</div>
<button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
</form>
<div class="mt-4 text-center">
<img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
</div>
</div>
</div>Composants associés
Composant du formulaire d’inscription
Un formulaire d’inscription simple et réactif pour une place de marché avec un style de design industriel, une palette de couleurs neutres chaudes et une prise en charge du mode sombre.
Formulaire d’inscription
Un composant de formulaire d’inscription minimaliste doté de Tailwind CSS, prenant en charge le mode sombre et les fonctionnalités de conception réactive.
Formulaire d’inscription Art Déco
Un composant de formulaire d’inscription réactif avec une esthétique Art déco, une palette de couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux sites Web gouvernementaux ou de services publics.