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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-full max-w-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="••••••••" required>
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">
Don’t have an account? <a href="#" class="text-green-500 hover:text-green-400">Sign up</a>
</p>
</div>
</div>Composants associés
Formulaire de connexion Composante 37
Un composant de formulaire de connexion réactif conçu dans le style Material Design avec Tailwind CSS, prenant en charge le mode sombre.
Formulaire de connexion Skeuomorphic
Un composant de formulaire de connexion skeuomorphe avec une palette de couleurs en niveaux de gris et une complexité complexe, conçu pour un site Web de portfolio. Il est réactif et prend en charge le thème sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion skeuomorphe conçu avec des couleurs vives et une complexité modérée, adapté à un portfolio.