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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">Forgot Password?</a>
</div>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-300 text-sm">Or login with</p>
<div class="flex justify-center mt-2">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400" src="https://picsum.photos/seed/user1/40/40" alt="User Avatar">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user2/40/40" alt="User Avatar">
<img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user3/40/40" alt="User Avatar">
</div>
</div>
</div>
</div>Composants associés
Composant du formulaire de connexion
Formulaire de connexion skeuomorphique pour les médias sociaux avec prise en charge des couleurs pastel, réactif et du mode sombre. La forme présente un effet 3D subtil sur les entrées et les boutons, imitant les éléments physiques. Des ombres et des dégradés sont utilisés pour améliorer l’aspect skeuomorphe. Les entrées ont une ombre douce et les boutons ont une apparence cliquable en relief. La palette de couleurs pastel passe en douceur à une version plus sombre et atténuée en mode sombre, ce qui permet de maintenir la lisibilité et le confort visuel. La conception réactive garantit la facilité d’utilisation sur tous les appareils.
Composant du formulaire de connexion
Un composant de formulaire de connexion simple et réactif avec des couleurs neutres chaudes, un design axé sur la micro-interaction et une prise en charge du mode sombre, adapté aux systèmes de réservation et aux systèmes de réservation.
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.