Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif, conçu avec une palette de couleurs pastel (roses doux et gris complémentaires) et des micro-interactions attrayantes, telles que des transitions fluides et des effets subtils de survol/mise au point. Conçu pour les sites Web d’entreprise ou d’entreprise, il présente une mise en page épurée, est entièrement réactif et comprend une prise en charge complète des thèmes sombres. Construit uniquement avec HTML et Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-pink-50 dark:bg-slate-900 p-4 transition-colors duration-300">
<div class="bg-white dark:bg-slate-800 p-8 md:p-10 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-500 hover:scale-105">
<h2 class="text-3xl font-bold text-center text-pink-600 dark:text-pink-400 mb-8">
Welcome Back
</h2>
<form action="#" method="POST" class="space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Email address
</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
required
class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
placeholder="[email protected]"
/>
</div>
<div>
<label for="password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
Password
</label>
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
required
class="appearance-none block w-full px-4 py-3 rounded-lg border border-pink-200 dark:border-slate-600 placeholder-slate-400 dark:placeholder-slate-500 text-slate-900 dark:text-slate-100 bg-white dark:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent transition-all duration-300 ease-in-out shadow-sm hover:shadow-md focus:shadow-lg"
placeholder="••••••••"
/>
</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-pink-500 dark:text-pink-400 focus:ring-pink-400 dark:focus:ring-pink-300 border-pink-300 dark:border-slate-500 rounded bg-pink-50 dark:bg-slate-700 transition duration-150 ease-in-out" />
<label for="remember-me" class="ml-2 block text-sm text-slate-800 dark:text-slate-300">
Remember me
</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
Forgot password?
</a>
</div>
</div>
<div>
<button
type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-md text-lg font-medium text-white bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-offset-slate-800 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95"
>
Sign In
</button>
</div>
</form>
<p class="mt-8 text-center text-sm text-slate-600 dark:text-slate-400">
Not a member?
<a href="#" class="font-medium text-pink-500 hover:text-pink-400 dark:text-pink-400 dark:hover:text-pink-300 transition-colors duration-150 ease-in-out">
Sign up now
</a>
</p>
</div>
</div>Composants associés
Composant du formulaire de connexion
Un composant de formulaire de connexion simple conçu dans un style brutaliste avec des tons de terre, adapté à des fins de blog/contenu, et optimisé pour les thèmes clairs et sombres.
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif avec un design skeuomorphique, une palette de couleurs monochromatiques et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.
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.