Composant Composants d’authentification
Un composant d’authentification conçu par Neumorphic pour le commerce électronique avec des couleurs vives, une prise en charge du thème sombre et un design réactif.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-800 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-8 w-80 neumorphic">
<h2 class="text-2xl font-bold text-center text-vibrant">Login</h2>
<form class="mt-4">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input type="email" id="email" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="[email protected]">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input type="password" id="password" class="focus:ring-vibrant focus:border-transparent block w-full p-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" placeholder="••••••••">
</div>
<button type="submit" class="w-full bg-vibrant text-white p-2 rounded-lg hover:shadow-lg transition ease-in-out duration-150">Login</button>
</form>
<div class="text-center mt-4">
<p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-vibrant">Sign Up</a></p>
</div>
<hr class="my-4 border-gray-300 dark:border-gray-600">
<div class="text-center">
<p class="text-gray-600 dark:text-gray-400">or login with</p>
<div class="flex justify-center mt-2">
<img src="https://picsum.photos/30" alt="Google Logo" class="rounded-full mx-2">
<img src="https://picsum.photos/30" alt="Facebook Logo" class="rounded-full mx-2">
<img src="https://picsum.photos/30" alt="Twitter Logo" class="rounded-full mx-2">
</div>
</div>
</div>
</div>
<style>
@import "https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css";
.neumorphic {
background: #e0e0e0;
border-radius: 20px;
box-shadow: 8px 8px 15px rgba(226, 226, 226, 0.3), -8px -8px 15px rgba(255, 255, 255, 0.3);
}
.dark.neumorphic {
background: #434343;
box-shadow: 8px 8px 15px rgba(0,0,0,0.5), -8px -8px 15px rgba(255,255,255,0.1);
}
.text-vibrant {
color: #ff4081; /* You can change this color based on your vibrant color scheme */
}
</style>Composants associés
Composant d’authentification skeuomorphic
Composant d’authentification skeuomorphe avec schéma de couleurs triadique, complexité modérée, conception réactive et prise en charge du mode sombre. Conçu dans un but de portefeuille. Utilise Tailwind CSS.
3D_Auth_Agriculture_Simple
Un composant d’authentification simple et réactif avec une esthétique de conception 3D et une palette de couleurs à contraste élevé, adapté aux sites Web agricoles. Dispose d’une prise en charge du mode sombre.
Auth_Component_Dating_Neon_Artistic
Un composant d’authentification simple et artistique avec une palette de couleurs néon/électrique, conçu pour les plateformes de rencontres/sociales, avec une esthétique aquarelle douce et une réactivité totale avec prise en charge du mode sombre.