Composant du formulaire d’inscription
Un formulaire d’inscription simple avec un design pastel 3D, réactif et avec prise en charge du mode sombre. Convient pour un blog ou un site de consommation de contenu.
HTML Code
<div class="min-h-screen bg-pastel-light dark:bg-pastel-dark flex items-center justify-center">
<div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-2xl w-full max-w-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Username</label>
<input type="text" id="username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="Email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-600 dark:text-white dark:border-gray-500" placeholder="********">
</div>
<div class="flex items-center justify-between">
<button class="bg-pastel-accent hover:bg-pastel-accent-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-pastel-accent light:hover:bg-pastel-accent-dark" type="button">
Register
</button>
</div>
</form>
</div>
</div>Composants associés
Formulaire d’inscription pour brutalisme
Formulaire d’inscription Composant avec un design brutaliste, une palette de couleurs triadique et une complexité simple, adapté à un tableau de bord. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Formulaire d’inscription au neumorphisme
Composant du formulaire d’enregistrement de neumorphisme avec prise en charge du thème sombre à l’aide de Tailwind CSS
formulaire-d-inscription-ecommerce-tailwind
Composant de formulaire d’inscription minimaliste pour le commerce électronique à l’aide de Tailwind CSS avec prise en charge du mode réactif et sombre, avec une palette de couleurs bleu-orange complémentaire.