Composant Composants d’authentification
Composant d’authentification avec mode sombre, effets réactifs et aucune dépendance JavaScript.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="bg-gray-800 p-10 rounded-lg shadow-xl w-full max-w-md">
<h1 class="text-white text-center text-2xl font-bold mb-6">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email Address</label>
<input type="email" id="email" class="shadow appearance-nonse border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-700" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Sign In</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-700" href="#">Forgot Password?</a>
</div>
</form>
</div>
</div>Composants associés
Composant d’authentification Skeuomorphism
Composant d’authentification Skeuomorphism avec schéma de couleurs analogue et mise en page complexe à des fins de blog/contenu, prise en charge des thèmes réactifs et sombres.
Composant Composants d’authentification
Un composant d’authentification simple conçu avec le style Neumorphism et une palette de couleurs monochromatiques, adapté aux interfaces de médias sociaux. Il comprend un formulaire de connexion avec des champs d’e-mail et de mot de passe, un bouton de connexion et un lien d’inscription. Le composant est réactif et prend en charge le mode sombre.
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.