Componente Social Login - Neumorfismo Vibrante Complesso
Un componente complesso e reattivo del modulo di accesso social con neumorfismo e accenti vivaci utilizzando Tailwind CSS, che supporta la modalità oscura.
Codice HTML
<!-- Main container simulating the page background -->
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<!-- Neumorphic Login Form Card -->
<div class="w-full max-w-sm p-8 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-xl shadow-gray-300 dark:shadow-gray-950">
<h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100">Sign In</h2>
<!-- Social Login Buttons -->
<div class="grid grid-cols-1 gap-4 mb-6">
<!-- Google Button -->
<button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
bg-gray-100 dark:bg-gray-700
shadow-md shadow-gray-300 dark:shadow-900
hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
transition duration-200 ease-in-out">
<!-- Placeholder for Google Icon -->
<span class="font-bold mr-2">G</span>
<span class="text-gray-800 dark:text-gray-100">Sign in with Google</span>
</button>
<!-- Facebook Button -->
<button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
bg-gray-100 dark:bg-gray-700
shadow-md shadow-gray-300 dark:shadow-900
hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
transition duration-200 ease-in-out">
<!-- Placeholder for Facebook Icon -->
<span class="font-bold mr-2">f</span>
<span class="text-gray-800 dark:text-gray-100">Sign in with Facebook</span>
</button>
<!-- Add more social buttons if needed for complexity -->
<!-- Apple Button Example -->
<button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
bg-gray-100 dark:bg-gray-700
shadow-md shadow-gray-300 dark:shadow-900
hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
transition duration-200 ease-in-out">
<!-- Placeholder for Apple Icon -->
<span class="font-bold mr-2"></span>
<span class="text-gray-800 dark:text-gray-100">Sign in with Apple</span>
</button>
</div>
<div class="text-center text-gray-500 dark:text-gray-400 mb-6">or</div>
<!-- Email/Password Form -->
<form>
<div class="mb-4">
<input type="email" placeholder="Email" class="w-full py-3 px-4 rounded-lg
bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
shadow-inner shadow-gray-300 dark:shadow-900
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
placeholder-gray-500 dark:placeholder-gray-400
transition duration-200 ease-in-out">
</div>
<div class="mb-6">
<input type="password" placeholder="Password" class="w-full py-3 px-4 rounded-lg
bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
shadow-inner shadow-gray-300 dark:shadow-900
focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
placeholder-gray-500 dark:placeholder-gray-400
transition duration-200 ease-in-out">
</div>
<div class="flex items-center justify-between mb-6">
<div class="flex items-center">
<!-- Standard checkbox input -->
<input id="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">
Remember me
</label>
</div>
<a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
</div>
<!-- Login Button -->
<button type="submit" class="w-full py-3 px-4 rounded-lg mb-6
bg-blue-600 text-white font-bold
shadow-md shadow-blue-500 dark:shadow-blue-900
hover:bg-blue-700 dark:hover:bg-blue-700
active:shadow-inner active:shadow-blue-700 dark:active:shadow-blue-950
transition duration-200 ease-in-out">
Login
</button>
</form>
<div class="text-center text-sm text-gray-800 dark:text-gray-200">
Don't have an account?
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-bold">Sign Up</a>
</div>
</div>
</div>Componenti correlati
Componente di accesso social minimalista
Componente di accesso social minimalista in scala di grigi per l'e-commerce, semplice, reattivo, supporto per temi scuri, senza JavaScript
Componente Social Login
Un componente di social login in scala di grigi in stile Glassmorphism, con supporto per la modalità scura, adatto per siti di e-commerce. Il design è reattivo e include effetti di vetro smerigliato e sfocatura. Non è incluso alcun JavaScript.
Componente SocialLogin
Un componente di accesso social reattivo costruito con Tailwind CSS, con sottili microinterazioni al passaggio del mouse e supporto completo per la modalità oscura. Utilizza CDN con icone semplici per i loghi dei social media.