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 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.
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.
Composant du formulaire de connexion
Un composant de formulaire de connexion réactif avec un design skeuomorphique, une palette de couleurs monochromatiques et une prise en charge du thème sombre, adapté aux sites Web d’entreprise.