Composant du formulaire de connexion
Un composant de formulaire de connexion réactif stylisé avec glassmorphism, avec des éléments translucides avec des effets de flou et la prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-md p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" id="password" placeholder="********" required>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="mr-2 leading-tight">
<span class="text-sm text-gray-700 dark:text-gray-300">Remember Me</span>
</div>
<a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">Forgot Password?</a>
</div>
<div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400">Sign Up</a></p>
</div>
</div>Composants associés
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif avec un design inspiré du Bauhaus, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux applications financières et bancaires.
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.
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.