Componente Social Login
Un componente di accesso social reattivo in modalità oscura progettato per una dashboard, con combinazione di colori triadici e ricchi elementi interattivi. Include opzioni di accesso con varie piattaforme social, visualizzazione dei dati degli utenti e controlli.
Codice HTML
<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
<h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
<div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
<div class="flex justify-between mb-4">
<span class="text-lg font-semibold">Sign in with:</span>
<img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
</div>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
</a>
<a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
</a>
<a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
<img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
</a>
</div>
<div class="mt-6 text-center">
<span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
</div>
</div>
<footer class="mt-6 text-gray-400 text-xs">
© 2023 Your Company. All rights reserved.
</footer>
</div>Componenti correlati
Accesso social Brutalist (Moda/Bellezza)
Un componente di accesso sociale brutalista complesso e vibrante progettato per i marchi di moda e bellezza, caratterizzato da contrasto elevato, elementi audaci e piena reattività con supporto per la modalità oscura.
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.
Componente Social Login
Un componente minimalista per l'accesso sociale progettato con Tailwind CSS, caratterizzato da spazi puliti ed effetti reattivi sia per i temi chiari che per quelli scuri.