Composants d’authentification
Un composant d’authentification simple pour les sites Web d’entreprise et d’entreprise à l’aide du Material Design et une palette de couleurs complémentaire avec Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 max-w-sm w-full">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center">Login</h2>
<form class="mt-4 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="[email protected]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<input type="password" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:ring-blue-500" placeholder="********">
</div>
<button type="submit" class="w-full bg-blue-600 dark:bg-blue-500 text-white font-semibold py-2 rounded-md shadow hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300">Login</button>
</form>
<div class="mt-4 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
</div>
</div>
</div>Composants associés
Composants d’authentification
Un composant d’authentification complexe et réactif dans un design brutaliste avec un thème sombre, adapté aux applications de médias sociaux.
Composants d’authentification
Un composant de connexion et d’inscription réactif et interactif conçu avec des micro-interactions, utilisant des couleurs complémentaires pour une interface de contenu de blog avec prise en charge du thème sombre.
Composant d’authentification
Composant d’authentification de type neumorphisme pour le commerce électronique, avec une palette de couleurs triadique et une mise en page simple. Prend en charge le mode sombre et est réactif. Utilise Tailwind CSS. Pas de JavaScript.