Composant de connexion/inscription
Un composant de connexion/inscription minimaliste conçu avec Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres. Le composant offre une esthétique épurée et simple tout en assurant sa facilité d’utilisation sur divers appareils.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Login to your account</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email" placeholder="[email protected]" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Login</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full mt-8">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center">Create Account</h2>
<p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today!</p>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Name</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="name" placeholder="John Doe" required />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email-signup">Email</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email-signup" placeholder="[email protected]" required />
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300" for="password-signup">Password</label>
<input class="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password-signup" placeholder="********" required />
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md transition duration-200">Sign Up</button>
</form>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
</div>
</div>
</div>Composants associés
RetroVibrantCryptoAuth
Un composant de connexion/inscription complexe, d’inspiration rétro avec des couleurs vives, conçu pour les applications de crypto-monnaie/blockchain, avec une mise en page réactive et une prise en charge du mode sombre.
Formulaire de connexion/inscription minimaliste - Mode/Beauté
Un formulaire de connexion/inscription minimaliste et plat conçu pour les marques de mode/beauté, avec des couleurs neutres chaudes, une réactivité totale et une prise en charge du mode sombre. Il offre une esthétique épurée en mettant l’accent sur l’expérience utilisateur.
Composant de connexion/inscription
Un composant de connexion/inscription réactif avec un thème dégradé océan/bleu, des transitions fluides et une prise en charge du mode sombre, adapté aux sites Web d’événements et de conférences.