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.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
<div class="flex flex-col space-y-4">
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
Sign in with Google
</button>
<button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
<svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
</svg>
Sign in with Facebook
</button>
</div>
<div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
</div>
</div>
</div>Componenti correlati
Componente Social Login
Componente di accesso sociale Material Design con combinazione di colori analoga, complessità semplice, per scopi di portfolio, reattivo con supporto per temi scuri.
Componente Social Login
Un componente di social login in scala di grigi in stile Glassmorphism, con supporto per la modalità scura, adatto per siti di e-commerce. Il design è reattivo e include effetti di vetro smerigliato e sfocatura. Non è incluso alcun JavaScript.
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.