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.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
<h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
<div class="space-y-4">
<button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
<img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
</button>
<button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
</button>
<button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
</button>
</div>
<p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
</p>
</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 accesso social semplice e reattivo che utilizza i colori in scala di grigi e lo stile di progettazione Microinteractions, con supporto per il tema scuro tramite Tailwind CSS. Presenta sottili animazioni al passaggio del mouse per le icone sociali.
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.