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