Composant d’authentification
Un composant d’authentification réactif conçu dans un style skeuomorphe avec une palette de couleurs en niveaux de gris adaptée aux sites Web d’entreprise.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-8 space-y-6 bg-white shadow-md rounded-xl dark:bg-gray-800">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back</h2>
<p class="text-gray-600 dark:text-gray-300 text-center">Please sign in to your account</p>
<form class="space-y-4">
<div>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input type="email" id="email" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="[email protected]" required />
</div>
<div>
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="block w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-gray-400 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your password" required />
</div>
<button type="submit" class="w-full px-4 py-2 font-bold text-white transition-colors duration-200 bg-gray-700 rounded-md hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Sign In</button>
</form>
<p class="mt-4 text-sm text-center text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
<div class="mt-4 text-center">
<img src="https://picsum.photos/100/100" alt="User Avatar" class="inline-block rounded-full" />
<p class="mt-2 text-gray-600 dark:text-gray-300">Username</p>
</div>
</div>
</div>Composants associés
Authentification de datation Bauhaus
Il s’agit d’un composant d’authentification de complexité modérée pour les plateformes de rencontres/sociales, avec un design inspiré du Bauhaus avec une palette de couleurs analogue. Il est réactif et prend en charge le mode sombre.
Composants d’authentification rétro vintage
Un composant d’authentification réactif complexe au design rétro/vintage, adapté à un tableau de bord de visualisation et de contrôle des données. Il présente des couleurs triadiques et des éléments interactifs.
Skeuomorphic_Auth_CRM_Component
Un composant d’authentification complexe et réactif pour les outils CRM/Business, doté d’un style de conception skeuomorphe avec des couleurs neutres froides et une prise en charge du mode sombre.