Composant de connexion sociale rétro
Un composant de connexion sociale simple et réactif avec une esthétique rétro/vintage des années 80/90 utilisant une palette de couleurs forêt/vert. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex min-h-screen items-center justify-center bg-lime-100 p-4 font-mono dark:bg-gray-900">
<div class="w-full max-w-sm rounded-lg border-4 border-lime-700 bg-gradient-to-br from-lime-200 to-lime-50 perspective-1000 p-6 shadow-[8px_8px_0px_rgba(30,64,17,0.7)] transition-all duration-300 hover:shadow-[12px_12px_0px_rgba(30,64,17,0.8)] dark:border-emerald-600 dark:from-gray-800 dark:to-gray-700 dark:shadow-[8px_8px_0px_rgba(6,78,59,0.7)] dark:hover:shadow-[12px_12px_0px_rgba(6,78,59,0.8)]">
<div class="mb-6 flex items-center justify-between">
<h2 class="text-2xl font-bold uppercase text-lime-800 dark:text-emerald-400">Plug In!</h2>
<span class="text-xl text-lime-600 dark:text-emerald-500">💾</span>
</div>
<div class="space-y-4">
<button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
<img src="https://www.svgrepo.com/show/512317/chrome.svg" alt="Google logo" class="h-6 w-6 filter invert dark:filter-none" />
Login with Google
</button>
<button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
<img src="https://www.svgrepo.com/show/448206/apple.svg" alt="Apple logo" class="h-6 w-6 filter invert dark:filter-none" />
Login with Apple
</button>
<button class="flex w-full items-center justify-center gap-3 rounded-md border-2 border-lime-600 bg-lime-400 py-3 text-lg font-semibold uppercase tracking-wide text-lime-900 shadow-[4px_4px_0px_rgba(63,98,18,0.7)] transition-all ease-in-out hover:-translate-y-1 hover:shadow-[6px_6px_0px_rgba(63,98,18,0.8)] focus:outline-none focus:ring-4 focus:ring-lime-700 dark:border-emerald-500 dark:bg-emerald-700 dark:text-emerald-50 dark:shadow-[4px_4px_0px_rgba(6,78,59,0.7)] dark:hover:-translate-y-1 dark:hover:shadow-[6px_6px_0px_rgba(6,78,59,0.8)] dark:focus:ring-emerald-400">
<img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a69f118df70add2fce7_580b57fcd9996e24bc43c513.png" alt="Facebook logo" class="h-6 w-6 dark:filter invert" />
Login with Facebook
</button>
</div>
<div class="mt-6 text-center text-sm text-lime-700 dark:text-emerald-300">
<p>Don't have an account? <a href="#" class="font-bold underline hover:text-lime-900 dark:hover:text-emerald-500">Register Now!</a></p>
</div>
</div>
</div>Composants associés
Connexion sociale neumorphique en niveaux de gris
Un composant de connexion sociale réactif avec un style de conception Neumorphism en niveaux de gris. Comprend des boutons pour les fournisseurs de réseaux sociaux, un séparateur et des liens pour s’inscrire/Mot de passe oublié. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Conçu pour les environnements de tableau de bord.
Composant de connexion sociale
Composant de connexion sociale propre, inspiré du code, avec une police monospace, une palette de couleurs neutres et chaudes, adapté aux sites Web gouvernementaux/de services publics. Comprend la conception réactive et la prise en charge du mode sombre.
Composant de connexion sociale
Un composant de social login à l’esthétique industrielle et brute utilisant des couleurs neutres et froides, adapté aux systèmes de réservation et de réservation. Il dispose de boutons de connexion sociale et d’un séparateur avec une option de connexion manuelle, tous réactifs et avec prise en charge du mode sombre.