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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
<h2 class="text-lg font-semibold text-center text-gray-800 dark:text-gray-200">Login with</h2>
<div class="mt-4">
<button class="flex items-center justify-center w-full p-2 mb-4 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition duration-200">
<img src="https://picsum.photos/20/20" alt="Google Logo" class="mr-2 rounded-full">
Google
</button>
<button class="flex items-center justify-center w-full p-2 mb-4 bg-gray-600 hover:bg-gray-700 text-white rounded-md transition duration-200">
<img src="https://randomuser.me/api/portraits/med/men/50.jpg" alt="Facebook Logo" class="mr-2 rounded-full">
Facebook
</button>
<button class="flex items-center justify-center w-full p-2 mb-4 bg-red-600 hover:bg-red-700 text-white rounded-md transition duration-200">
<img src="https://picsum.photos/20/20" alt="Twitter Logo" class="mr-2 rounded-full">
Twitter
</button>
</div>
<div class="text-center">
<p class="text-gray-600 dark:text-gray-300">or</p>
<a href="#" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600">Sign in with email</a>
</div>
</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 Social Login
Componente di accesso social pulito e ispirato al codice con un carattere monospace, combinazione di colori neutri caldi, adatto per siti Web governativi/di servizio pubblico. Include un design reattivo e il supporto per la modalità oscura.
Componente Social Login
Un componente di social login con un'estetica industriale e materica che utilizza colori neutri freddi, adatto per sistemi di prenotazione e prenotazione. È dotato di pulsanti di accesso social e di un separatore con un'opzione di accesso manuale, il tutto reattivo e con supporto per la modalità oscura.