Social-Login-Komponente
Eine reaktionsschnelle Social-Login-Komponente, die für den Dunkelmodus mit einem monochromatischen Farbschema entwickelt wurde. Geeignet für den Konsum von Blogs und Inhalten mit interaktiven Funktionen.
HTML-Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
<div class="flex flex-col space-y-4">
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Facebook</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Google</span>
</a>
<a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Log in with Twitter</span>
</a>
</div>
<p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>Verwandte Komponenten
Social-Login-Komponente
Eine komplexe, reaktionsschnelle Social-Login-Komponente, die für Dashboards entwickelt wurde. Verwendet eine Benutzeroberfläche im Dunkelmodus mit einem Graustufen-Farbschema. Verfügt über Schaltflächen für soziale Anbieter, ein E-Mail-/Passwort-Formular, einen "Remember me"-Schalter und ein Trennzeichen mit alternativen Anmeldeoptionen. Vollständig reaktionsschnell mit Bildillustration und verwendet Tailwind CSS mit dem Präfix dark: für die Unterstützung des dunklen Designs. Kein JavaScript erforderlich.
Retro Social Login-Komponente
Eine einfache, reaktionsschnelle Social-Login-Komponente mit einer Retro-/Vintage-Ästhetik der 80er/90er Jahre unter Verwendung einer Wald-/Grün-Farbpalette. Inklusive Unterstützung für den Dunkelmodus.
Neumorphic Grayscale Social Login
Eine responsive Social Login Komponente mit einem Neumorphism-Designstil in Graustufen. Enthält Schaltflächen für soziale Anbieter, ein Trennzeichen und Links zum Anmelden/Passwort vergessen. Unterstützt den Dunkelmodus mit dem Präfix dark: von Tailwind. Entwickelt für Dashboard-Umgebungen.