Composant de connexion/inscription
Un composant de connexion/inscription simple et réactif avec une esthétique de conception matérielle, une palette de couleurs analogue et une prise en charge du mode sombre, conçu avec Tailwind CSS pour un portfolio.
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 p-8 rounded-lg shadow-md max-w-sm w-full">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>
<ul class="flex justify-center mb-6">
<li class="mr-4">
<a href="#" class="text-blue-500 dark:text-blue-400 border-b-2 border-blue-500 dark:border-blue-400 pb-1">Login</a>
</li>
<li>
<a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 pb-1">Sign Up</a>
</li>
</ul>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
<input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="********">
</div>
<div class="flex items-center justify-between">
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-800">
Sign In
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
Forgot Password?
</a>
</div>
</form>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
<div class="flex justify-center space-x-4 mt-2">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-red-600 dark:hover:bg-red-800">
Google
</button>
<button class="bg-blue-800 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900">
Facebook
</button>
</div>
</div>
</div>
</div>Composants associés
Composant de connexion/inscription - Dégradé de tons de terre
Un composant de connexion/inscription réactif conçu pour les plateformes d’emploi/carrière, avec des dégradés de tons de terre et des transitions fluides. Inclut la prise en charge du mode sombre et du HTML sémantique.
LoginSignupComponent
Un composant de connexion/inscription réactif conçu avec le style Neumorphism et la palette de couleurs pastel pour les interfaces de médias sociaux.
Composant de connexion/inscription
Composant complexe de connexion/inscription conçu avec un style skeuomorphe, utilisant un schéma de couleurs en niveaux de gris pour une interface de tableau de bord. Il comprend divers éléments interactifs et est réactif avec la prise en charge du thème sombre.