Composant Composants d’authentification
Un composant d’authentification en mode sombre réactif pour les tableaux de bord, utilisant des tons de terre pour une esthétique naturelle.
HTML Code
<div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
<div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
<form>
<div class="mb-4">
<label class="block text-sm mb-2" for="email">Email</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-sm mb-2" for="password">Password</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
</div>
<button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
</form>
<p class="mt-4 text-sm text-center">
<a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-6">
<span class="w-1/4 border-b border-gray-600"></span>
<span class="mx-2 text-gray-400">or</span>
<span class="w-1/4 border-b border-gray-600"></span>
</div>
<button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Sign in with Google
</button>
</div>
</div>Composants associés
Composants d’authentification
Un composant d’authentification réactif conçu dans l’interface utilisateur du mode sombre, avec des formulaires de connexion et d’inscription avec des images de remplacement.
Composant d’authentification de luxe
Un composant d’authentification élégant et sophistiqué conçu pour les marques de mode et de beauté de luxe, doté d’une interface riche, d’une mise en page réactive et d’une prise en charge du mode sombre à l’aide d’une palette de couleurs analogue.
Auth_Component_Watercolor_Artistic
Un composant d’authentification simple et réactif conçu avec une esthétique douce, aquarelle et artistique. Dispose de couleurs neutres chaudes et de la prise en charge du mode sombre, adapté aux sites Web d’événements ou de conférences.