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.
HTML Code
<div class="min-h-screen bg-gray-800 text-gray-100 flex items-center justify-center">
<div class="bg-gray-900 dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm">
<h1 class="text-2xl font-semibold mb-4 text-center">Sign In</h1>
<form>
<div class="mb-4">
<label class="block text-sm mb-2" for="email">Email</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="email" id="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-sm mb-2" for="password">Password</label>
<input class="w-full p-2 bg-gray-700 text-gray-300 rounded focus:outline-none focus:ring focus:ring-earth-500" type="password" id="password" placeholder="••••••••">
</div>
<button class="w-full bg-earth-500 text-white py-2 rounded focus:outline-none hover:bg-earth-600 transition duration-200" type="submit">Log In</button>
</form>
<p class="mt-4 text-sm text-center">
<a href="#" class="text-earth-400 hover:underline">Forgot Password?</a>
</p>
<div class="flex items-center justify-center mt-6">
<span class="w-1/4 border-b border-gray-600"></span>
<span class="mx-2 text-gray-400">or</span>
<span class="w-1/4 border-b border-gray-600"></span>
</div>
<button class="flex items-center justify-center w-full bg-earth-500 text-white py-2 mt-4 rounded focus:outline-none hover:bg-earth-600 transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
Sign in with Google
</button>
</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 conçu par Neumorphic pour le commerce électronique avec des couleurs vives, une prise en charge du thème sombre et un design réactif.
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.