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
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 formulaire de connexion réactif et complexe avec un design minimaliste/plat adapté à un blog ou à un site de contenu. Il dispose d’une palette de couleurs monochromatiques, d’une prise en charge du thème sombre et de plusieurs éléments interactifs, mis en œuvre uniquement avec HTML et Tailwind CSS.
RetroLoginFormComponent
Formulaire de connexion réactif, pris en charge par un thème sombre, rétro/vintage avec des tons de terre, adapté aux sites Web d’entreprise. Utilise un minimum d’éléments.