Componente Social Login
Un componente di accesso social reattivo con stile glassmorphism, che supporta il tema scuro e presenta segnaposto per immagini e avatar.
Codice HTML
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-700 rounded-xl shadow-lg p-8 w-96">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-6">Login with</h2>
<div class="flex flex-col">
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=1" alt="Google" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Google</span>
</a>
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=2" alt="Facebook" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Facebook</span>
</a>
<a href="#" class="flex items-center justify-center mb-4 p-3 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-300">
<img src="https://picsum.photos/30?random=3" alt="Twitter" class="h-8 w-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Twitter</span>
</a>
</div>
<div class="flex items-center justify-center mt-6">
<span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
<span class="mx-2 text-gray-600 dark:text-gray-400">or</span>
<span class="h-px w-full bg-gray-300 dark:bg-gray-600"></span>
</div>
<div class="mt-6">
<input type="email" placeholder="Email" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
<input type="password" placeholder="Password" class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-300 dark:focus:ring-blue-600 transition duration-300 mb-4">
<button class="w-full p-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Login</button>
</div>
<div class="text-center mt-4">
<a href="#" class="text-blue-500 hover:underline transition duration-300">Forgot Password?</a>
</div>
</div>
</div>Componenti correlati
Componente di accesso social per la progettazione dei materiali
Componente di accesso sociale Material Design con combinazione di colori complementari, complessità moderata, per scopi di blog/contenuti, reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.
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 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.