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 composant de formulaire d’inscription complexe et réactif pour les applications financières/bancaires, doté d’un design épuré et minimaliste avec des couleurs très contrastées, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.
Composant du formulaire d’inscription
Un formulaire d’inscription réactif avec la conception Neumorphism, une palette de couleurs analogue et la prise en charge du mode sombre, construit avec Tailwind CSS à des fins de médias sociaux.
Formulaire d’inscription au skeuomorphisme Niveaux de gris
Un composant de formulaire d’inscription skeuomorphe en niveaux de gris pour les portefeuilles, avec une complexité modérée, un design réactif et un support de thème sombre, pas de Javascript. Images de picsum.photos et randomuser.me utilisées.