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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="email">Email</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2" for="password">Password</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
</form>
<div class="mt-4 text-center">
<span class="text-gray-400">or</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
<div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
<h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="name">Name</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-2" for="email-signup">Email</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-300 mb-2" for="password-signup">Password</label>
<input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
</div>
<button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
</form>
<div class="mt-4 text-center">
<span class="text-gray-400">or</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
</div>
</div>
</div>Composants associés
AuthComponent
Un composant d’authentification skeuomorphique conçu avec Tailwind CSS avec des effets réactifs et la prise en charge des thèmes sombres.
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.
Retro_Healthcare_Auth_Component
Un composant d’authentification réactif avec un design rétro/vintage, une palette de couleurs sourdes, adapté aux applications médicales/de santé, y compris la prise en charge du mode sombre.