소셜 로그인 구성 요소
포레스트 그린 색상 팔레트가 있는 간단하고 깨끗하며 반응이 빠른 소셜 로그인 구성 요소로, 뉴스/저널리즘 웹사이트용으로 설계되었으며 타이포그래피와 그리드 시스템을 강조합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
<div class="w-full max-w-sm p-6 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-colors duration-300">
<div class="text-center">
<h2 class="text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-2 transition-colors duration-300">Sign In/Up</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm transition-colors duration-300">Access exclusive content and personalized news.</p>
</div>
<div class="space-y-3">
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
<svg class="w-4 h-4 mr-2 text-red-500" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.0003 12.723c3.309-1.01 5.922-4.103 5.922-7.857C17.9223 2.146 15.7063 0 12.9633 0c-3.15 0-5.877 2.155-5.877 4.887c0 3.754 2.613 6.847 5.922 7.857zM12.0003 18.003c-5.521 0-10.002-4.482-10.002-10.002S6.4793 0 12.0003 0s10.002 4.482 10.002 10.002-4.481 10.002-10.002 10.002zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z"/>
<path d="M12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
<path d="M12.0003 15.002c-2.761 0-5.001-2.24-5.001-5.001s2.24-5.001 5.001-5.001 5.001 2.24 5.001 5.001-2.24 5.001-5.001 5.001zM12.0003 19.999c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001-2.688 6.001-6.001 6.001zM12.0003 24c-6.627 0-12-5.373-12-12C0.0003 5.373 5.3733 0 12.0003 0s12 5.373 12 12c0 6.627-5.373 12-12 12zM12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
<path d="M12.0003 22c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10z"/>
<path d="m20.916 11.23a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-15.066 0c.49.977 1.113 1.806 1.89 2.541.606-.296 1.23-.549 1.864-.757-.512-.975-1.003-2.023-1.472-3.123-.762-.02-1.525-.02-2.285 0-.249.686-.412 1.388-.512 2.09-.02.083-.027.166-.022.249zm1.312-3.136c.036-.076.07-.152.106-.226l-1.04-.602 1.455-.788c.37.52.813 1.002 1.326 1.44zm11.137-1.44l1.455.788-1.04.602c.036.074.07.15.106.226-.513-.438-.956-.92-1.326-1.44zm-7.382-2.012c.706 0 1.413 0 2.119 0-.027.702-.132 1.404-.326 2.09-.646.07-1.294.07-1.942 0-.194-.686-.299-1.388-.326-2.09zm.006 13.916c-.026-.686-.13-1.382-.322-2.07-.643-.07-1.284-.07-1.927 0-.192.688-.296 1.384-.322 2.07.703 0 1.407 0 2.571 0zm.014-4.218c-.512-.975-1.003-2.023-1.472-3.123-.633-.208-1.258-.461-1.864-.757.777.735 1.4 1.564 1.89 2.541.606.296 1.23.549 1.864.757zm4.304-.757a9.92 9.92 0 0 0-.022-.249c-.1-.703-.263-1.405-.512-2.09-.76-.02-1.523-.02-2.285 0-.469 1.1-.96 2.148-1.472 3.123.633.208 1.258.461 1.864.757.777-.735 1.4-1.564 1.89-2.541zm-10.748-1.127c-.49-.977-1.113-1.806-1.89-2.541-.606.296-1.23.549-1.864.757.512.975 1.003 2.023 1.472 3.123.762-.02 1.525-.02 2.285 0 .249-.686.412-1.388.512-2.09.02-.083.027-.166.022-.249zm-1.312 3.136c-.036.076-.07.152-.106.226l1.04.602-1.455.788c-.37-.52-.813-1.002-1.326-1.44zm-1.096-7.348c.026.686.13 1.382.322 2.07.643.07 1.284.07 1.927 0 .192-.688.296-1.384.322-2.07-.703 0-1.407 0-2.571 0z"/>
<circle cx="12.0003" cy="4.9997" r="2.0001"/>
<path d="m12.0003 12.0003c-2.209 0-4.0002-1.791-4.0002-4.0002s1.791-4.0002 4.0002-4.0002 4.0002 1.791 4.0002 4.0002-1.791 4.0002-4.0002 4.0002zm0 1.9999c-.735 0-1.41-.227-1.966-.607-.556-.38-.97-.905-1.233-1.503-.984-2.247-3.926-7.65-4.524-8.818-.28-.541-.448-1.272-.448-2.027 0-2.545 1.579-4.708 3.75-5.592.518-.21.997-.331 1.478-.331h.001c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002.001-.001.001-.001.002-.001.001 0 .001 0 .002 0 .001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02.02-.03.04-.06.06-.09.02-.03.03-.05.05-.08.02-.03.04-.05.05-.08.02-.02.03-.05.05-.07.01-.01.02-.03.03-.04.01-.02.02-.03.03-.05.01-.01.02-.03.03-.04.01-.01.02-.02.03-.03l.001-.001c.001-.001.001-.001.002-.002l.001-.001c.001-.001.001-.001.002-.002c.001-.001c.001-.001.001-.001.002-.001c.001 0 .001 0 .002 0h.054c2.193 0 4.225 1.116 5.378 2.946l1.248 1.942.062.096c.032.05.066.1.1.15.006.01.013.022.02.032.032.046.065.092.097.137.009.014.019.028.028.042.02-.03.04-.06.06-.09.03-.04.06-.08.09-.12.01-.01.02-.02.03-.03c.03-.04.05-.07.08-.11.02-.03.04-.07.06-.1.02-.02.04-.05.06-.07.01-.01.03-.04.04-.06.01-0.01.02-.03.03-.04v-.001l.001-.001c.01-.02.01-.03.02-.05.01-.01.01-.02.02-.03s.01-.02.01-.03c.01-.01.01-.02.02-.03.01-.01.01-.02.02-.03.01-.01.01-.02.02-.02-.823-1.077-1.488-2.264-1.996-3.528-1.036-.337-2.12-.524-3.238-.524h-.001c-3.111 0-5.836 1.776-7.202 4.364-.475.86-.777 1.83-.895 2.845-.065.556 4.398 7.57 4.962 8.528.268.455.617.848 1.024 1.178.407.33.864.582 1.354.74h-.001c.001 0 .001.001.002.001.001 0 .001.001.002.001h.001c.001 0 .001.001.002.001.001 0 .001.001.002.001l.001.001c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0h.001c.001 0 .001 0 .002 0l.001 0c.001 0 .001 0 .002 0c-.001 0-.001-.001-.002-.001l-.001 0c-.001 0-.001 0-.002 0h-.001z" fill="currentColor"/>
<path d="m12 0c-3.15 0-5.877 2.155-5.877 4.887 0 3.754 2.613 6.847 5.922 7.857a6.0007 6.0007 0 0 1-.045.006c-3.313 0-6.001-2.688-6.001-6.001s2.688-6.001 6.001-6.001 6.001 2.688 6.001 6.001v-.001c0-3.754-2.613-6.847-5.922-7.857zm.0003 16.002c-4.417 0-8.001-3.584-8.001-8.001S7.5833 0 12.0003 0s8.001 3.584 8.001 8.001-3.584 8.001-8.001 8.001z" fill="currentColor"/>
</svg>
Continue with Google
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
<svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.78 9.388 8.718 10.375V14.06H5.443V12h3.275V9.387c0-3.23 1.957-5.021 4.877-5.021 1.397 0 2.457.25 2.79.362v2.666h-1.68C13.213 7.85 1.17 9.336 12.002 9.336l.002-.002V22.375C20.22 21.01 24 16.716 24 12c0-6.627-5.373-12-12-12z"/>
</svg>
Continue with Facebook
</button>
<button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors duration-300">
<svg class="w-4 h-4 mr-2 text-black dark:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.002 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.717 17.098c-.295.772-.888 1.493-1.636 2.115-.747.622-1.571 1.055-2.457 1.258-2.128.48-4.29.48-6.418 0-.886-.203-1.71-.636-2.457-1.258-.748-.622-1.341-1.343-1.636-2.115-.48-1.29-.48-2.58 0-3.87.295-.772.888-1.493 1.636-2.115.747-.622 1.571-1.055 2.457-1.258 2.128-.48 4.29-.48 6.418 0 .886.203 1.71.636 2.457 1.258.748.622 1.341 1.343 1.636 2.115.48 1.29.48 2.58 0 3.87zM12.002 5.567c-1.42 0-2.825.267-4.148.802-.674.265-1.254.598-1.76.996C5.586 7.73 5.17 8.16 4.887 8.653c-.31.54-.486 1.13-.526 1.748-.04.617-.008 1.25.093 1.884-.253-.162-.485-.348-.696-.554-.21-.205-.386-.43-.532-.676-.146-.245-.25-.503-.314-.766-.064-.263-.08-1.006-.08-1.006h-.002c-1.554-1.353-2.094-1.92-2.094-1.92-.127-.13-.263-.263-.408-.398-.242-.22-.497-.432-.767-.636-.27-.204-.543-.39-.817-.558-.274-.168-.54-.316-.798-.445-.257-.13-.509-.234-.755-.314-.247-.078-.487-.135-.72-.167l-.02-.005a3.064 3.064 0 0 0-1.03-.004c-.394.02-.78.077-1.157.172-.377.094-.74.22-.984.34-.243.12-.464.26-.66.417-.197.157-.367.327-.514.498-.146.171-.266.347-.36.526-.094.18-.16-.36-.16-.36l-.001-.001c-.13-.266-.28-.52-.45-.76-.17-.24-.356-.47-.558-.69-.2-.22-.41-.428-.627-.62-.218-.19-.434-.367-.648-.53-.213-.163-.42-.31-.62-.437-.2-.127-.39-.234-.567-.32-.178-.087-.34-.15-.49-.19l-.02-.007c-.4-.05-.79-.06-1.18-.03-.39.03-.77.108-1.13.238-.36.13-.69.293-.98.487-.29.194-.546.417-.768.667-.22.25-.402.52-.54.802-.138.283-.23.578-.277.88-.046.302-.04.606.012.906.053.3.14.6.26.885.12.285.27.56.45.816.18.256.39.49.63.702.235.212.493.398.767.558.274.159.56.288.857.387.297.098.604.168.913.208.31.04.614.04.912 0 .3-.04.59-.115.86-.226.27-.11.52-.25.75-.41.23-.16.43-.34.6-.53.17-.19.31-.4.42-.61s.19-.43.23-.65l.006-.03c.09-1.282.046-2.316-.134-3.076-.138-.588-.344-1.11-.618-1.564-.275-.453-.61-.83-.988-1.127-.38-.297-.8-.51-1.25-.638-1.4-.385-2.88-.34-4.275.12-.59.19-1.18.45-1.76.75-.58.3-.98.66-1.19.99-.21.33-.28.59-.21.78.07.19.26.28.56.28.3 0 .6-.07.9-.21.3-.14.58-.33.84-.57.26-.24.52-.49.77-.75.25-.26.49-.52.7-.77.21-.25.4-.49.57-.73.18-.24.32-.47.43-.68.11-.21.18-.4.2-.56.02-.16-.01-.3-.08-.43-.07-.13-.19-.22-.36-.28-.17-.06-.39-.08-.66-.08-1.11 0-2.28.27-3.41.81-.67.32-1.3.7-1.89 1.13-.58.43-1.13.9-1.63 1.4-1.5.75-2.9 1.63-4.22 2.65-.66.5-.94.75-.84.75h-.001c.01 0 .02-.002.03-.005.04-.01.07-.02.1-.03.04-.01.07-.02.1-.03.03-.01.06-.02.09-.02.03-.01.06-.01.09-.02.03-.01.06-.01.09-.01.02 0 .04-.002.06-.002.02 0 .04-.002.06-.002.007 0 .013-.001.02-.001.002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .002 0 .004 0 .006 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 0 .003 0 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .002 -.001 .003 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 0 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .002 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 -.001 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001 0 .001 -.001 .001 0 .001 0 .001 -.001 .001-.082.016-.395.045-.596.088-.857.147-1.002.327-.145.18-.08.3-.06.36.02.06.07.1.15.11.08.01.21-.01.38-.05.17-.04.37-.1.59-.19.22-.09.46-.2.72-.32.26-.12.55-.26.86-.4.31-.14.65-.29 1.02-.45 1.48-.65 3.06-1.12 4.71-1.34 2.22-.3 4.49-.03 6.64.8.44.16.86.35 1.25.59.39.23.76.51 1.1.84.34.33.64.67.9.99h.002c.08-.02.16-.04.24-.06.08-.02.16-.04.24-.05.08-.01.16-.02.24-.02.08 0 .16-.01.24-.01.08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08 0 .16 0 .24 0 .08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002.08-.001.16-.001.24-.002-.12-.01-.24-.01-.36-.01-.12 0-.24 0-.36 0-.12 0-.24-.001-.36-.001-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002-.12-.001-.24-.001-.36-.002c-1.144-.065-2.29-.005-3.414.185-.72.12-.22-.1-.22-.1z"/>
<path d="M12.002 12s-1.898 3.53-2.617 4.908c-.71-1.378-2.617-4.908-2.617-4.908-.344-.658-.3-1.63.12-2.3.42-.67 1.15-1.07 1.95-1.12.8 0 1.54.45 1.95 1.12.42.67.46 1.64.12 2.3z"/>
<ellipse cx="12.002" cy="7.417" rx="1.5" ry="1.5"/>
</svg>
Continue with Apple
</button>
</div>
<div class="relative flex py-2 items-center">
<div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
<span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or continue with email</span>
<div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
</div>
<form class="space-y-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
<div class="mt-1">
<input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
</div>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<div class="mt-1">
<input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 transition-colors duration-300">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-emerald-600 transition-colors duration-300">
<label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
</div>
<div class="text-sm">
<a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Forgot your password?</a>
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-700 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 transition-colors duration-300">
Sign In
</button>
</div>
</form>
<div class="text-center text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
Not a member? <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-300">Sign up now</a>
</div>
</div>
</div>관련 구성 요소
소셜 로그인 구성 요소
머티리얼 디자인(Material Design) 원칙에서 영감을 받은 복잡한 소셜 로그인 구성 요소로, 풍부한 보석 톤, 반응형 레이아웃, 소셜 네트워킹 인터페이스에 대한 다크 모드 지원을 특징으로 합니다.