Composants d’authentification
Un composant de connexion et d’inscription réactif et interactif conçu avec des micro-interactions, utilisant des couleurs complémentaires pour une interface de contenu de blog avec prise en charge du thème sombre.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" id="remember" class="mr-2 leading-tight">
<label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
</div>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
</div>
<button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
</form>
<div class="mt-6 text-center">
<span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
<a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
</div>
</div>
</div>Composants associés
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.
Composant Composants d’authentification
Un composant Web de style brutalisme pour les interfaces d’authentification des médias sociaux avec une palette de couleurs pastel et un contraste élevé pour le mode sombre.
Composants d’authentification
Un composant d’authentification complexe et réactif dans un design brutaliste avec un thème sombre, adapté aux applications de médias sociaux.