Formulaire de connexion Neumorphism
Un composant de formulaire de connexion conçu avec le style Neumorphism, avec un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
<h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
</div>
<div class="mt-6">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
</div>
</form>
</div>
</div>
Composants associés
Composant du formulaire de connexion 3D
Un formulaire de connexion réactif avec un design 3D, une palette de couleurs triadique et une prise en charge du thème sombre. Convient aux interfaces de médias sociaux.
Formulaire de connexion brutaliste
Un formulaire de connexion complexe et réactif conçu dans un style brutaliste avec des tons de terre, adapté aux applications de commerce électronique, avec prise en charge du mode sombre.
Formulaire de connexion Skeuomorphic
Un simple formulaire de connexion Skeuomorphic avec des couleurs triadiques à des fins de tableau de bord, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.