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 minimaliste avec une palette de couleurs en niveaux de gris et des éléments interactifs riches, réactif et incluant la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant du formulaire d’inscription
Un formulaire d’inscription réactif avec la conception Neumorphism, une palette de couleurs analogue et la prise en charge du mode sombre, construit avec Tailwind CSS à des fins de médias sociaux.
Formulaire d’inscription au skeuomorphisme Niveaux de gris
Un composant de formulaire d’inscription skeuomorphe en niveaux de gris pour les portefeuilles, avec une complexité modérée, un design réactif et un support de thème sombre, pas de Javascript. Images de picsum.photos et randomuser.me utilisées.