Componente Social Login
Componente Social Login con Material Design, colori pastello e complessità moderata per aziende/aziende
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="px-8 py-6 mt-4 text-left bg-white dark:bg-gray-800 shadow-lg rounded-lg">
<h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login</h3>
<div class="mt-4">
<div>
<label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
<input type="email" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="mt-4">
<label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
<input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="flex items-baseline justify-between">
<button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">Login</button>
<a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
</div>
<div class="mt-6 text-center">
<p class="text-gray-700 dark:text-gray-200">Or login with:</p>
<div class="flex justify-center gap-4 mt-2">
<button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="h-5">
Google
</button>
<button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" alt="Facebook" class="h-5">
Facebook
</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Social Login
Un componente di accesso social semplice e reattivo che utilizza i colori in scala di grigi e lo stile di progettazione Microinteractions, con supporto per il tema scuro tramite Tailwind CSS. Presenta sottili animazioni al passaggio del mouse per le icone sociali.
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 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.