Composant du formulaire de connexion
Un composant de formulaire de connexion réactif conçu avec le style Glassmorphism, incorporant des effets de verre givré, des effets de flou et la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 shadow-lg rounded-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Login</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="border border-gray-300 dark:border-gray-600 rounded-lg p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300" type="password" id="password" placeholder="********" required>
</div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-300" type="submit">Login</button>
</form>
<p class="text-center text-gray-600 dark:text-gray-400 mt-4">Or log in with</p>
<div class="flex justify-around mt-4">
<a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=1" alt="Google"></a>
<a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=2" alt="Facebook"></a>
<a href="#"><img class="h-8 w-8 rounded-full" src="https://picsum.photos/200/200?random=3" alt="Twitter"></a>
</div>
</div>
</div>Composants associés
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.
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.
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.