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.
HTML Code
<div class="min-h-screen bg-gray-200 flex items-center justify-center dark:bg-gray-900">
<div class="bg-white p-10 rounded-lg shadow-xl w-96 dark:bg-gray-800">
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">Login</h2>
<form>
<div class="mb-5">
<label for="email" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="password" class="block text-sm font-medium text-gray-600 mb-2 dark:text-gray-300">Password</label>
<input type="password" id="password" class="w-full px-4 py-3 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-gray-600" placeholder="********">
</div>
<button type="submit" class="w-full bg-gray-700 text-white py-3 rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
Login
</button>
</form>
<p class="text-center text-gray-600 mt-6 text-sm dark:text-gray-400">
Don't have an account? <a href="#" class="text-gray-700 hover:underline dark:text-gray-300">Sign Up</a>
</p>
</div>
</div>Composants associés
Composant du formulaire de connexion
Un formulaire de connexion simple et réactif conçu avec un style skeuomorphe qui imite les éléments du monde réel à l’aide d’une palette de couleurs vives. Il convient aux interfaces de médias sociaux et prend en charge le mode sombre.
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.
Composant du formulaire de connexion
Formulaire de connexion réactif avec conception matérielle, schéma de couleurs triadique et prise en charge du mode sombre à l’aide de Tailwind CSS.