Composant de connexion/inscription
Un composant de connexion/inscription conçu dans le style Neumorphism avec une palette de couleurs pastel, adapté aux sites Web d’entreprise/d’entreprise, et prenant en charge le mode sombre.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Welcome Back</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Login</button>
</form>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-300">or</p>
<button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Sign Up</button>
</div>
</div>
</div>
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Create an Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
<input type="text" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
</div>
<button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Sign Up</button>
</form>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-300">or</p>
<button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Login</button>
</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 conçu dans le style Material Design avec prise en charge du thème sombre et palette de couleurs complémentaire, adapté aux interfaces de médias sociaux.