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.
HTML Code
<form class="max-w-sm mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark">
<div class="mb-6">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow-inner appearance-none border rounded w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold py-3 px-6 rounded focus:outline-none focus:shadow-outline transform transition duration-300 ease-in-out hover:scale-105" type="button">
Sign In
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-500" href="#">
Forgot Password?
</a>
</div>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
<div class="flex justify-center gap-4 mt-2">
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<i class="fab fa-google text-xl"></i>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<i class="fab fa-facebook text-xl"></i>
</button>
<button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</button>
</div>
</div>
</form>Composants associés
Composant de formulaire de connexion - Mode sombre vibrant
Un composant de formulaire de connexion complexe et réactif conçu pour une utilisation professionnelle/d’entreprise avec une palette de couleurs vives et une prise en charge complète du mode sombre, visant à réduire la fatigue oculaire.
Composant du formulaire de connexion
Un formulaire de connexion inspiré du Bauhaus pour les marques de mode/beauté, avec des couleurs très contrastées, des formes géométriques et une réactivité totale avec prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif avec un design inspiré du Bauhaus, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux applications financières et bancaires.