Composant du formulaire de connexion
Composant de formulaire de connexion avec conception 3D, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
```html
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-lg w-96 transform transition duration-500 hover:scale-105">
<h2 tabindex="0" class="text-3xl font-bold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Password</label>
<input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="Enter your password">
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105">
Login
</button>
</form>
<div class="mt-6 text-center">
<a href="#" class="text-sm text-blue-600 hover:underline dark:text-blue-400">Forgot Password?</a>
</div>
</div>
</div>
```Composants associés
Formulaire de connexion brutaliste
Un composant de formulaire de connexion simple, de style brutaliste, conçu pour les applications technologiques/SaaS, avec un contraste élevé, une typographie audacieuse et une palette de couleurs analogue avec une réactivité totale et une prise en charge du mode sombre.
Formulaire de connexion Composante 37
Un composant de formulaire de connexion réactif conçu dans le style Material Design avec Tailwind CSS, prenant en charge le mode sombre.
Formulaire de connexion Neumorphism
Un composant de formulaire de connexion de style Neumorphism pour un tableau de bord, avec un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.