Composant Composants d’authentification
Un composant d’authentification simple conçu avec le style Neumorphism et une palette de couleurs monochromatiques, adapté aux interfaces de médias sociaux. Il comprend un formulaire de connexion avec des champs d’e-mail et de mot de passe, un bouton de connexion et un lien d’inscription. Le composant est réactif et prend en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-8 w-80 neumorphism">
<h2 class="text-center text-xl font-semibold text-gray-800 dark:text-gray-200">Login</h2>
<form class="mt-6">
<div class="mb-4">
<label class="block mb-2 text-gray-700 dark:text-gray-300" for="email">Email</label>
<input type="email" id="email" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="[email protected]" required>
</div>
<div class="mb-6">
<label class="block mb-2 text-gray-700 dark:text-gray-300" for="password">Password</label>
<input type="password" id="password" class="w-full p-2 rounded shadow-inner border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="••••••••" required>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-600">Log In</button>
</form>
<p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a></p>
<div class="flex justify-center mt-4">
<img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
<img src="https://picsum.photos/200/100" alt="Random Image" class="mt-4 rounded-lg shadow-lg w-full h-auto">
</div>
</div>
<style>
.neumorphism {
box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.2),
-8px -8px 16px rgba(255, 255, 255, 0.7);
border-radius: 20px;
}
</style>Composants associés
Auth_Component_Watercolor_Artistic
Un composant d’authentification simple et réactif conçu avec une esthétique douce, aquarelle et artistique. Dispose de couleurs neutres chaudes et de la prise en charge du mode sombre, adapté aux sites Web d’événements ou de conférences.
Retro_Healthcare_Auth_Component
Un composant d’authentification réactif avec un design rétro/vintage, une palette de couleurs sourdes, adapté aux applications médicales/de santé, y compris la prise en charge du mode sombre.
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.