미니멀리스트 소셜 로그인 구성 요소
전자 상거래를 위한 그레이스케일의 미니멀리스트 소셜 로그인 구성 요소, 단순, 반응형, 어두운 테마 지원, JavaScript 없음
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm p-6 bg-white rounded-md shadow-md dark:bg-gray-800">
<h1 class="text-2xl font-semibold text-center text-gray-700 dark:text-white">Login</h1>
<div class="flex justify-center mt-4 space-x-4">
<button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Facebook</button>
<button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Google</button>
<button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Twitter</button>
</div>
</div>
</div>관련 구성 요소
소셜 로그인 구성 요소 - 미시적 상호작용
Tailwind CSS를 사용하는 소셜 로그인 구성 요소 카드로, 버튼의 마이크로 상호 작용(호버/포커스의 확대/축소 효과), 응답성(중앙 최대 너비) 및 어두운 테마 지원을 제공합니다. picsum.photos의 자리 표시자 이미지와 소셜 아이콘에 포함된 SVG를 사용합니다. 자바스크립트가 없습니다.