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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<div class="bg-gray-800 shadow-lg rounded-lg p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-center mb-6">Welcome Back!</h2>
<form>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Email</label>
<input type="email" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-sm font-medium mb-2">Password</label>
<input type="password" class="block w-full p-2 border border-gray-600 rounded-md bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500" placeholder="Your password" required>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" id="remember-me">
<label for="remember-me" class="ml-2 text-sm">Remember me</label>
</div>
<a href="#" class="text-sm text-blue-400 hover:underline">Forgot password?</a>
</div>
<button type="submit" class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-md transition-colors">Login</button>
</form>
<div class="mt-6 text-center">
<p class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></p>
</div>
<div class="mt-6 flex items-center justify-between border-t border-gray-600 pt-4">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full border border-gray-600">
<span class="ml-2 text-sm">John Doe</span>
</div>
<a href="#" class="text-sm text-blue-400 hover:underline">Settings</a>
</div>
</div>
</div>Composants associés
Composant d’authentification
Composant d’authentification de type neumorphisme pour le commerce électronique, avec une palette de couleurs triadique et une mise en page simple. Prend en charge le mode sombre et est réactif. Utilise Tailwind CSS. Pas de JavaScript.
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.
Authentification de datation Bauhaus
Il s’agit d’un composant d’authentification de complexité modérée pour les plateformes de rencontres/sociales, avec un design inspiré du Bauhaus avec une palette de couleurs analogue. Il est réactif et prend en charge le mode sombre.