Composant Composants d’authentification
Un composant Web de style brutalisme pour les interfaces d’authentification des médias sociaux avec une palette de couleurs pastel et un contraste élevé pour le mode sombre.
HTML Code
<div class="min-h-screen bg-white dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-md w-full bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-8 space-y-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 text-center">Log In</h2>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
<input type="email" name="email" required placeholder="[email protected]" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" name="password" required placeholder="••••••••" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 dark:focus:border-blue-600 p-2">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 rounded">
<label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-100">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Forgot your password?</a>
</div>
</div>
<button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400">Log In</button>
</form>
<div class="text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign Up</a></p>
</div>
<div class="flex justify-between items-center">
<div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
<span class="text-gray-600 dark:text-gray-300">or</span>
<div class="h-1 w-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
</div>
<div class="flex justify-center space-x-4">
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=1" alt="Example Image" class="rounded-full" />
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=2" alt="Example Image" class="rounded-full" />
</a>
<a href="#" class="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shadow-md">
<img src="https://picsum.photos/30/30?random=3" alt="Example Image" class="rounded-full" />
</a>
</div>
</div>
</div>Composants associés
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.
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.