레트로 소셜 로그인 컴포넌트
포레스트/그린 색상 팔레트를 사용하여 레트로/빈티지 80년대/90년대 미학을 갖춘 간단하고 반응이 빠른 소셜 로그인 구성 요소입니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<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>