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
Composants d’authentification rétro vintage
Un composant d’authentification réactif complexe au design rétro/vintage, adapté à un tableau de bord de visualisation et de contrôle des données. Il présente des couleurs triadiques et des éléments interactifs.
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.
Composants d’authentification
Composant de composants d’authentification avec conception 3D, schéma de couleurs monochromatique, complexité simple et objectif du portefeuille. Conception réactive avec prise en charge du thème sombre.