Composant du formulaire d’inscription
Un composant de formulaire d’inscription minimaliste et réactif conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des espaces propres avec un minimum d’éléments.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md w-full">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center">Create Account</h2>
<form class="mt-6 space-y-4">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="name">Name</label>
<input type="text" id="name" name="name" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="Your Name">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
<input type="email" id="email" name="email" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="[email protected]">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
<input type="password" id="password" name="password" class="w-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" required placeholder="••••••••">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1" for="avatar">Avatar</label>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border border-gray-300 dark:border-gray-600">
<input type="file" id="avatar" name="avatar" class="bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md p-2 text-gray-800 dark:text-gray-200">
</div>
</div>
<div class="mt-6">
<button type="submit" class="w-full py-2 px-4 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">Register</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a>
</p>
</div>
</div>Composants associés
Composant du formulaire d’inscription
Un composant de formulaire d’inscription avec une conception Neumorphism, une palette de couleurs en niveaux de gris, une complexité modérée et une prise en charge réactive du thème sombre à l’aide de Tailwind CSS.
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.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec un style glassmorphism, une palette de couleurs de terre et une prise en charge du thème sombre. Conçu pour les plateformes de médias sociaux, avec une mise en page simple et des éléments minimaux. Utilise Tailwind CSS pour le style et inclut des exemples d’espaces réservés d’image.