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
Composants d’authentification
Un composant d’authentification complexe et réactif dans un design brutaliste avec un thème sombre, adapté aux applications de médias sociaux.
Composant Composants d’authentification
Un composant d’authentification simple et réactif conçu selon les principes de Material Design, avec des tons de terre et la prise en charge du mode sombre. Convient pour un site de portefeuille.
Composant Composants d’authentification
Un composant d’authentification réactif avec prise en charge du thème sombre, réalisé dans le style Skeuomorphism.