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
Composant du formulaire de connexion
Un composant de formulaire de connexion propre, inspiré du code, avec des polices monospace et des couleurs neutres froides, adapté aux plateformes de marché. Comprend une réactivité complète et la prise en charge du mode sombre.
Formulaire de connexion Neumorphism
Un composant de formulaire de connexion de style Neumorphism pour un tableau de bord, avec un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Formulaire de connexion Skeuomorphic
Un formulaire de connexion réactif avec un design Skeuomorphism, une palette de couleurs monochromatique et une complexité modérée, conçu pour les plateformes de médias sociaux. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.