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 social reattivo con stile Glassmorphism, colori vivaci e supporto per temi scuri.
Componente di accesso social di lusso per l'app meteo
Un componente di accesso sociale elegante e sofisticato progettato per un'applicazione meteo/climatica, con colori ad alto contrasto, tipografia raffinata e supporto per la modalità scura. Offre molteplici opzioni di accesso e un'atmosfera moderna e premium.
Componente SocialLogin
Un componente di accesso social reattivo costruito con Tailwind CSS, con sottili microinterazioni al passaggio del mouse e supporto completo per la modalità oscura. Utilizza CDN con icone semplici per i loghi dei social media.