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
Formulaire de connexion minimaliste
Un formulaire de connexion minimaliste pour les sites e-commerce, avec prise en charge du responsive design et du mode sombre. Utilise un schéma de couleurs analogue. Pas de JavaScript.
Composant du formulaire de connexion
Un composant de formulaire de connexion propre, inspiré du code, avec des polices monospace et des couleurs neutres froides, adapté aux plateformes de marché. Comprend une réactivité complète et la prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif, conçu avec une palette de couleurs pastel (roses doux et gris complémentaires) et des micro-interactions attrayantes, telles que des transitions fluides et des effets subtils de survol/mise au point. Conçu pour les sites Web d’entreprise ou d’entreprise, il présente une mise en page épurée, est entièrement réactif et comprend une prise en charge complète des thèmes sombres. Construit uniquement avec HTML et Tailwind CSS.