소셜 로그인 구성 요소

<div class="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg bg-white dark:bg-gray-800 p-6 shadow-md">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login with Social Media</h2>
    <div class="flex justify-center space-x-4">
      <button aria-label="Login with Google" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.189 12.001l-4.51 2.28L1.45 10.089zM10 12.001v3.15l5.735 3.175-.007-3.092zM10 8.85L15.728 5.725 15.735 2.634zM7.189 12.001H2.689v-3.15h4.5z" fill="#FFCC4D"></path><path d="M7.189 12.001l2.811-1.621v3.235zM15.735 12.001l-5.735 3.175-5.749-2.907z" fill="#1976D2"></path><path d="M7.189 12.001H2.689v-3.15h4.5z" fill="#4CAF50"></path><path d="M15.728 5.725L10 8.85 7.189 7.229zM15.735 12.001v3.15l-5.735 3.175z" fill="#F44336"></path><path d="M10 8.85l5.728-3.125 5.743 3.125L10 8.85z" fill="#E53935"></path><path d="M10 12.001l-2.811 1.621v3.235L10 18.488l5.735-3.175L10 12.001z" fill="#FFCC4D"></path><path d="M10 12.001l2.811 1.621v3.235L10 18.488l-5.749-2.907L10 12.001z" fill="#4CAF50"></path><path d="M10 8.85L4.265 5.725 4.258 2.634l5.742 3.125 5.728-3.125L10 8.85z" fill="#1976D2"></path>
        </svg>
      </button>
      <button aria-label="Login with Facebook" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0228 5.65715 21.2108 10.4319 21.9491V14.8906H7.53379V12H10.4319V9.31156C10.4319 6.33506 12.2252 4.61273 14.9875 4.61273C16.3815 4.61273 17.6106 4.86996 17.9986 4.90543V7.56192L16.3412 7.56298C14.9162 7.56298 14.6415 8.24465 14.6415 9.16964V12H17.85L17.3426 14.8894H14.6415V21.9491C19.354 21.1944 22 17.0516 22 12Z"></path>
        </svg>
      </button>
      <button aria-label="Login with Twitter" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.714 11.24H16.92L10.59 11.702 2.1 22.75H8.413l5.182-7.17L6.547 2.25H2.416L10.719 13.3L18.244 2.25zM17.291 19.75H15.026L5.41 4.25H7.68L17.291 19.75z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>