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
Composant du formulaire d’inscription
Un formulaire d’inscription minimaliste au design plat avec des effets réactifs et une prise en charge du thème sombre, à l’aide de Tailwind CSS.
Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif avec des micro-interactions et la prise en charge du thème sombre, stylisé avec Tailwind CSS.
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.