Composant de connexion/inscription
Un composant simple de connexion/inscription conçu pour le mode sombre avec une palette de couleurs pastel, adapté à un portfolio.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
<div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold mb-6 text-center">Welcome to My Portfolio</h2>
<form>
<div class="mb-4">
<label class="block text-sm mb-2" for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
</div>
<div class="mb-6">
<label class="block text-sm mb-2" for="password">Password</label>
<input type="password" id="password" placeholder="your password" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
</div>
<button type="submit" class="w-full py-2 bg-green-600 hover:bg-green-500 text-white rounded">Login</button>
</form>
<div class="text-center mt-4">
<p class="text-sm">Don't have an account? <a href="#" class="text-green-400 hover:underline">Sign Up</a></p>
</div>
</div>
</div>
<!-- Dark Mode Styles -->
<div class="dark:bg-gray-900 dark:text-gray-200">
<div class="dark:bg-gray-800 dark:border-gray-700">
<input type="email" class="dark:bg-gray-700 dark:border-gray-600">
<input type="password" class="dark:bg-gray-700 dark:border-gray-600">
</div>
</div>
Composants associés
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.
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
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.