Composant du formulaire de connexion
Un composant de formulaire de connexion réactif stylisé avec glassmorphism, avec des éléments translucides avec des effets de flou et la prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-md p-8 max-w-md w-full">
<h2 class="text-2xl font-semibold text-center mb-6 text-gray-800 dark:text-gray-200">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="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 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 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" id="password" placeholder="********" required>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" class="mr-2 leading-tight">
<span class="text-sm text-gray-700 dark:text-gray-300">Remember Me</span>
</div>
<a href="#" class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400">Forgot Password?</a>
</div>
<div>
<button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Login</button>
</div>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-400">Sign Up</a></p>
</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.
Formulaire de connexion Skeuomorphic
Un simple formulaire de connexion Skeuomorphic avec des couleurs triadiques à des fins de tableau de bord, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant du formulaire de connexion
Un composant de formulaire de connexion propre, inspiré du code, avec des polices monospace et des couleurs neutres froides, adapté aux plateformes de marché. Comprend une réactivité complète et la prise en charge du mode sombre.