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
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.
Composants d’authentification
Composant de composants d’authentification avec conception 3D, schéma de couleurs monochromatique, complexité simple et objectif du portefeuille. Conception réactive avec prise en charge du thème sombre.
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.