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 - 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.
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.
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.