Composants d’authentification
Composant d’authentification réactif prenant en charge le mode sombre, utilisant Tailwind CSS avec des arrière-plans sombres, un formulaire de connexion et d’inscription et des images d’espace réservé aléatoires pour les éléments de l’interface utilisateur.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="w-full max-w-sm">
<div class="mb-6 text-center">
<h1 class="text-2xl font-bold">Authentication</h1>
<p class="text-gray-400">Please sign in or create an account</p>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg p-6">
<form>
<div class="mb-4">
<label for="email" class="block mb-2 text-sm font-medium">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="mb-4">
<label for="password" class="block mb-2 text-sm font-medium">Password</label>
<input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
</div>
<div class="flex items-center justify-between mb-6">
<div>
<input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="remember" class="ml-2 text-sm">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-400">or</p>
<button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
</div>
</div>
<div class="mt-6 text-center">
<img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
<p class="text-gray-400 text-sm">Random User Avatar</p>
</div>
</div>
</div>Composants associés
Composant d’authentification
Un composant d’authentification réactif conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris adaptée aux sites Web d’entreprise.
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.
Composant Composants d’authentification
Composant d’authentification avec mode sombre, effets réactifs et aucune dépendance JavaScript.