Authentication_Components_Component
Un composant d’authentification simple et réactif pour les médias sociaux avec des micro-interactions, une palette de couleurs complémentaire et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 w-full max-w-md transform transition duration-500 hover:scale-105">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-8">Join the Fun!</h2>
<div class="space-y-6">
<div>
<label for="email" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Email address</label>
<input type="email" id="email" name="email" autocomplete="email" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Email address">
</div>
<div>
<label for="password" class="text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Password</label>
<input type="password" id="password" name="password" autocomplete="current-password" required class="block w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white transition duration-300 ease-in-out transform focus:scale-105" placeholder="Password">
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-800 dark:focus:ring-purple-600 transform transition duration-300 hover:scale-105 hover:shadow-lg">
Sign In
</button>
</div>
</div>
<div class="mt-8 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">Or sign in with</p>
<div class="mt-4 flex justify-center space-x-4">
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Facebook">
<i class="fab fa-facebook-f text-xl"></i>
</button>
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-red-600 hover:bg-red-700 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Google">
<i class="fab fa-google text-xl"></i>
</button>
<button class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-400 hover:bg-blue-500 text-white shadow-md transform transition duration-300 hover:scale-110" aria-label="Sign in with Twitter">
<i class="fab fa-twitter text-xl"></i>
</button>
</div>
<p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
Don't have an account?
<a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300 transform transition duration-300 hover:scale-105">Sign Up</a>
</p>
</div>
</div>
</div>
<!-- Font Awesome for social icons (optional - only if you want the icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Composants associés
Composant Composants d’authentification
Un composant d’authentification simple et réactif conçu selon les principes de Material Design, avec des tons de terre et la prise en charge du mode sombre. Convient pour un site de portefeuille.
MinimalisteAuthForm
Un composant de formulaire de connexion réactif et minimaliste conçu pour les portfolios ou les applications Web. Il présente une esthétique de design plat avec une palette de couleurs complémentaire : le bleu est utilisé pour les éléments interactifs en mode clair et l’orange est utilisé en mode sombre. Le formulaire comprend des champs pour l’adresse e-mail et le mot de passe, une option « Se souvenir de moi », un lien « Mot de passe oublié », une option pour s’inscrire et l’intégration de la connexion sociale (par exemple, GitHub). Il prend en charge le thème sombre et est construit uniquement avec HTML et Tailwind CSS pour une intégration facile.
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.