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 Cyberpunk Sepia
Un composant de connexion/inscription complexe et réactif avec une esthétique néon inspirée du cyberpunk utilisant des tons sépia/bruns, adapté à un forum ou à une plate-forme communautaire. Comprend la prise en charge du mode sombre et des éléments interactifs.
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.
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.