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 brutaliste
Un formulaire de connexion complexe et réactif conçu dans un style brutaliste avec des tons de terre, adapté aux applications de commerce électronique, avec prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion conçu avec Glassmorphism, avec des éléments translucides semblables à du verre dépoli et des effets réactifs, prenant en charge les thèmes sombres à l’aide de Tailwind CSS.
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif conçu selon les principes de Material Design et stylisé à l’aide de Tailwind CSS. Il présente une palette de couleurs de tons de terre et une mise en page simple adaptée à un blog ou à une plate-forme de consommation de contenu, avec prise en charge du thème sombre.