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
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.
Brutalist_Login_Form_Travel_Tourism
Un formulaire de connexion de complexité moyenne, de style brutaliste avec des couleurs vives, conçu pour les sites Web de voyage et de tourisme. Offre un contraste élevé, une typographie audacieuse et une réactivité totale avec prise en charge du mode sombre.
Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif avec une esthétique cyberpunk et des accents néon pastel, conçu pour les marques de mode/beauté. Inclut la prise en charge du mode sombre.