Monospace_Dating_Login_Signup_Component
Un composant de connexion/inscription simple et réactif pour les plateformes de rencontres/sociales avec un design monospace inspiré du code. Dispose d’un monochrome noir et blanc avec une couleur d’accent vive et d’une prise en charge complète du mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border-2 border-gray-900 dark:border-gray-100 font-mono">
<div class="bg-gray-900 dark:bg-gray-100 text-green-400 dark:text-gray-900 p-3 flex items-center justify-between text-sm">
<span class="flex items-center">
<span class="h-2 w-2 rounded-full bg-red-500 mr-1"></span>
<span class="h-2 w-2 rounded-full bg-yellow-500 mr-1"></span>
<span class="h-2 w-2 rounded-full bg-green-500"></span>
</span>
<span class="terminal-title">_date_terminal.sh</span>
<span></span>
</div>
<div class="p-6 lg:p-8">
<h2 class="text-2xl lg:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-gray-100">
<span class="text-green-500 dark:text-pink-500">_</span>CONNECT
</h2>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
username:
</label>
<input type="text" id="username" placeholder="_your_handle_here" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
</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" placeholder="_secret_chars_" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
</div>
<div class="flex flex-col space-y-3">
<button type="button" class="bg-green-500 hover:bg-green-600 dark:bg-pink-500 dark:hover:bg-pink-600 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
LOGIN_()
</button>
<button type="button" class="bg-gray-700 hover:bg-gray-900 dark:bg-gray-200 dark:hover:bg-gray-50 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
SIGNUP_()
</button>
</div>
<div class="mt-6 text-center text-sm">
<a href="#" class="inline-block align-baseline font-bold text-green-500 hover:text-green-800 dark:text-pink-500 dark:hover:text-pink-800 transition-colors duration-200">
_FORGOT_PW?
</a>
</div>
</div>
</div>
</div>Composants associés
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.
MatérielEarthToneLoginSignupComponent
Un composant de connexion et d’inscription réactif de style Material Design avec une palette de couleurs terre, une complexité modérée avec un basculement interactif entre les formulaires, conçu pour les tableaux de bord avec prise en charge du mode sombre.
Brutalist_Agri_Auth_Component
Un composant de connexion/inscription de style brutaliste pour les sites Web d’agriculture/d’agriculture, avec des tons chauds de coucher de soleil, un contraste élevé et une mise en page complexe avec prise en charge du mode sombre.