Componente Social Login
Un componente di accesso social complesso e reattivo progettato per i dashboard. Utilizza un'interfaccia utente in modalità scura con una combinazione di colori in scala di grigi. Dispone di pulsanti per i provider social, un modulo e-mail/password, un interruttore "Ricordami" e un separatore con opzioni di accesso alternative. Completamente reattivo con illustrazione dell'immagine e utilizza Tailwind CSS con il prefisso dark: per il supporto del tema scuro. Non è necessario JavaScript.
Codice HTML
<section class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
<div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
<!-- Illustration Section -->
<div class="hidden md:block">
<img src="https://picsum.photos/seed/dashboard/800/600" alt="Dashboard Illustration" class="object-cover w-full h-full">
</div>
<!-- Login Form Section -->
<div class="px-6 py-8 sm:px-10">
<h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">Sign in to your Dashboard</h2>
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">Use your social account or email</p>
<!-- Social Login Buttons -->
<div class="mt-8 grid grid-cols-3 gap-3">
<button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">G</span>
<span class="ml-2">Google</span>
</button>
<button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">T</span>
<span class="ml-2">Twitter</span>
</button>
<button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">GH</span>
<span class="ml-2">GitHub</span>
</button>
</div>
<!-- Divider -->
<div class="relative mt-6">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
</div>
</div>
<!-- Email & Password Form -->
<form class="mt-6 space-y-6">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
<div class="mt-1">
<input id="email" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1">
<input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
</div>
</div>
<div class="flex items-center justify-between">
<label class="flex items-center">
<input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 focus:ring-gray-500">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Remember me</span>
</label>
<div class="text-sm">
<a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Sign in</button>
</div>
</form>
<p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Sign up</a></p>
</div>
</div>
</section>Componenti correlati
Componente Social Login - Microinterazioni
Una scheda componente di accesso social che utilizza Tailwind CSS, con microinterazioni sui pulsanti (effetto scala al passaggio del mouse/messa a fuoco), reattività (larghezza massima centrata) e supporto per temi scuri. Utilizza un'immagine segnaposto da picsum.photos e SVG incorporati per le icone social. Niente JavaScript.
Accesso social in scala di grigi neumorfica
Un componente di accesso sociale reattivo con uno stile di progettazione del neumorfismo in scala di grigi. Include pulsanti per i provider di servizi sociali, un separatore e collegamenti per l'iscrizione/password dimenticata. Supporta la modalità oscura utilizzando il prefisso dark: di Tailwind. Progettato per ambienti dashboard.
Componente Social Login
Un componente di accesso sociale dal design piatto minimalista con effetti reattivi e supporto per temi scuri.