Componente Social Login
Un componente di accesso sociale dal design piatto minimalista con effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-xs">
<h2 class="text-center text-lg font-semibold text-gray-900 dark:text-gray-100">Login with</h2>
<div class="mt-4 flex justify-around w-full">
<button class="flex items-center justify-center w-1/3 p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=1" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-1/3 p-2 bg-gray-700 text-white rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50">
<img src="https://picsum.photos/24/24?random=2" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
</div>
<div class="mt-4 text-center">
<span class="text-gray-500 dark:text-gray-400">or</span>
</div>
<input type="email" placeholder="Email" class="mt-4 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<input type="password" placeholder="Password" class="mt-2 p-2 w-full text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button class="mt-4 w-full p-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
Log In
</button>
<p class="mt-2 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a>
</p>
</div>
</div>Componenti correlati
Componente Social Login
Un semplice componente di accesso social con un design Skeuomorphic, toni della terra e un layout reattivo con supporto per la modalità oscura. Questo componente è adatto per blog o siti Web di consumo di contenuti, offrendo un'esperienza di accesso visivamente accattivante e facile da usare.
Componente di accesso social di lusso per l'app meteo
Un componente di accesso sociale elegante e sofisticato progettato per un'applicazione meteo/climatica, con colori ad alto contrasto, tipografia raffinata e supporto per la modalità scura. Offre molteplici opzioni di accesso e un'atmosfera moderna e premium.
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.