Composant du formulaire de connexion 3D
Un composant de formulaire de connexion 3D réactif conçu pour les sites Web d’entreprise, intégrant la prise en charge des tons de terre et du 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 transform transition-transform hover:scale-105 p-8 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login to Your Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
<input type="email" id="email" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" 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 type="password" id="password" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400" placeholder="••••••••" required>
</div>
<div class="mb-4 flex items-center justify-between">
<div>
<input type="checkbox" class="text-green-600 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400">
<span class="text-gray-700 dark:text-gray-300 ml-2">Remember me</span>
</div>
<a href="#" class="text-green-600 dark:text-green-400 text-sm">Forgot Password?</a>
</div>
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 transition duration-200">Login</button>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-green-600 dark:text-green-400">Sign Up</a>
</p>
</div>
</div>Composants associés
Composant du formulaire de connexion
Un composant de formulaire de connexion conçu avec Glassmorphism, avec des éléments translucides semblables à du verre dépoli et des effets réactifs, prenant en charge les thèmes sombres à l’aide de Tailwind CSS.
Formulaire de connexion brutaliste
Un formulaire de connexion complexe et réactif conçu dans un style brutaliste avec des tons de terre, adapté aux applications de commerce électronique, avec prise en charge du mode sombre.
Composant du formulaire de connexion
Un formulaire de connexion simple et réactif conçu avec un style skeuomorphe qui imite les éléments du monde réel à l’aide d’une palette de couleurs vives. Il convient aux interfaces de médias sociaux et prend en charge le mode sombre.