RetroLoginFormComponent
Formulaire de connexion réactif, pris en charge par un thème sombre, rétro/vintage avec des tons de terre, adapté aux sites Web d’entreprise. Utilise un minimum d’éléments.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900">
<div class="max-w-md w-full p-8 bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg">
<h2 class="text-center text-3xl font-extrabold text-stone-800 dark:text-stone-200 mb-6">Welcome Back</h2>
<form class="space-y-6">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="apperance-none relative block w-full px-3 py-2 border border-stone-300 dark:border-stone-700 placeholder-stone-500 dark:placeholder-stone-300 text-stone-900 dark:text-stone-100 rounded-md focus:outline-none focus:ring-amber-500 focus:border-amber-500 focus:z-10 sm:text-sm bg-stone-50 dark:bg-stone-800" placeholder="Password">
</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-amber-600 focus:ring-amber-500 border-stone-300 dark:border-stone-700 rounded">
<label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-100">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-amber-600 hover:text-amber-500">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-amber-700 hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-800 dark:hover:bg-amber-700">
Sign in
</button>
</div>
</form>
</div>
</div>Composants associés
Formulaire de connexion Skeuomorphic
Un simple formulaire de connexion Skeuomorphic avec des couleurs triadiques à des fins de tableau de bord, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Brutalist_Login_Form_Travel_Tourism
Un formulaire de connexion de complexité moyenne, de style brutaliste avec des couleurs vives, conçu pour les sites Web de voyage et de tourisme. Offre un contraste élevé, une typographie audacieuse et une réactivité totale avec prise en charge du mode sombre.
Formulaire de connexion brutaliste
Un composant de formulaire de connexion simple, de style brutaliste, conçu pour les applications technologiques/SaaS, avec un contraste élevé, une typographie audacieuse et une palette de couleurs analogue avec une réactivité totale et une prise en charge du mode sombre.