Composant du formulaire d’inscription
Un composant de formulaire d’inscription réactif de style Glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, prenant en charge le mode sombre et affichant des images de remplacement.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<form class="bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md p-8 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Register</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="username">Username</label>
<input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="username" placeholder="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 class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" 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="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="password" id="password" placeholder="Your Password" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
<input class="block w-full px-4 py-2 border rounded-md focus:ring focus:ring-blue-500 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-500" type="text" id="avatar" value="https://randomuser.me/api/portraits/men/10.jpg" readonly />
</div>
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md shadow focus:outline-none focus:ring focus:ring-blue-500 mt-4">Register</button>
</form>
</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.
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.
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.