Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif conçu avec un style skeuomorphe, utilisant une palette de couleurs monochromatiques et adapté aux expériences de commerce électronique. Il prend en charge le mode sombre et comprend des fonctions de saisie interactives pour l’enregistrement des utilisateurs.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 dark:bg-gray-800">
<div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg p-8 w-full max-w-lg">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6 text-center">Create Your Account</h2>
<div class="flex justify-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-24 h-24 border-2 border-gray-500 dark:border-gray-600 shadow-lg">
</div>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
<input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your username" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter 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 type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-600 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:shadow-outline" placeholder="Enter your password" required>
</div>
<div class="flex items-center justify-between mb-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-5 w-5 text-gray-600 dark:text-gray-400">
<span class="ml-2 text-gray-700 dark:text-gray-300">Remember Me</span>
</label>
</div>
<button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 dark:bg-gray-400 dark:hover:bg-gray-300 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Already have an account? <a href="#" class="text-gray-800 dark:text-gray-200 font-medium">Login</a>
</p>
</div>
</div>Composants associés
Formulaire d’inscription
Un composant élégant de formulaire d’inscription en mode sombre utilisant Tailwind CSS, avec des champs pour les informations sur l’utilisateur et un design réactif.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec un style de conception de neumorphisme et une palette de couleurs néon/électrique, prenant en charge le mode sombre. Conçu pour le conseil/les services.
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.