OAuth 버튼 구성 요소

<div class="p-4 sm:p-6 lg:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md p-6 sm:p-8 bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl border border-stone-300 dark:border-stone-700 overflow-hidden relative">
    <div class="absolute inset-0 border-4 border-stone-400 dark:border-stone-600 pointer-events-none rounded-lg"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-stone-300/30 via-transparent to-stone-400/30 dark:from-stone-700/30 dark:via-transparent dark:to-stone-600/30 opacity-50"></div>

    <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-200 mb-6 text-center tracking-wide uppercase relative z-10">
      <span class="relative inline-block pb-1">
        Sign In Via
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-amber-700 dark:bg-orange-400"></span>
      </span>
    </h2>

    <div class="space-y-4 relative z-10">
      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.016 12.000C22.016 17.523 17.523 22.016 12.000 22.016C6.477 22.016 1.984 17.523 1.984 12.000C1.984 6.477 6.477 1.984 12.000 1.984C17.523 1.984 22.016 6.477 22.016 12.000ZM4.896 12.000C4.896 15.932 8.068 19.104 12.000 19.104C15.932 19.104 19.104 15.932 19.104 12.000C19.104 8.068 15.932 4.896 12.000 4.896C8.068 4.896 4.896 8.068 4.896 12.000Z"/>
          <path d="M12.062 14.887L12.062 17.072H14.887L14.887 14.887H12.062ZM12.062 7.072L12.062 9.257H14.887L14.887 7.072H12.062ZM7.072 12.062L7.072 14.887H9.257L9.257 12.062H7.072ZM7.072 7.072L7.072 9.257H9.257L9.257 7.072H7.072ZM12.062 9.257L12.062 12.000H14.887L14.887 9.257H12.062Z"/>
        </svg>
        <span>Sign in with Government ID</span>
      </button>

      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/>
        </svg>
        <span>Sign in with Email & Password</span>
      </button>

      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-stone-400 dark:border-stone-600"></div>
        <span class="flex-shrink mx-4 text-stone-600 dark:text-stone-400 text-sm sm:text-base font-medium uppercase">OR</span>
        <div class="flex-grow border-t border-stone-400 dark:border-stone-600"></div>
      </div>

      <button class="w-full flex items-center justify-center px-4 py-3 border border-stone-400 dark:border-stone-600 rounded-md shadow-sm text-sm sm:text-base font-medium text-stone-800 dark:text-stone-200 hover:bg-stone-300 dark:hover:bg-stone-700 transition duration-300 ease-in-out transform hover:scale-105 active:scale-100 focus:outline-none focus:ring-2 focus:ring-amber-800 dark:focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800 bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-750">
        <svg class="h-5 w-5 sm:h-6 sm:w-6 mr-3 text-amber-900 dark:text-orange-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 8h-2.5v2.871h2.361c-.139 1.956-1.921 3.208-4.361 3.208-3.038 0-5.5-2.462-5.5-5.5s2.462-5.5 5.5-5.5c1.474 0 2.802.584 3.791 1.523l1.768-1.768c-1.464-1.398-3.414-2.255-5.559-2.255-4.971 0-9 4.029-9 9s4.029 9 9 9 9-4.029 9-9h-9zm0 0h5m-5 0v5m5 0v-5m-5 5v-5h5v5h-5z"/>
        </svg>
        <span>Sign in with other Service</span>
      </button>
    </div>

    <p class="mt-6 text-xs sm:text-sm text-center text-stone-600 dark:text-stone-400 relative z-10">
      By signing in, you agree to our
      <a href="#" class="font-semibold text-amber-800 dark:text-orange-400 hover:text-amber-900 dark:hover:text-orange-500 underline transition duration-200">Terms of Service</a>
      and
      <a href="#" class="font-semibold text-amber-800 dark:text-orange-400 hover:text-amber-900 dark:hover:text-orange-500 underline transition duration-200">Privacy Policy</a>.
    </p>
  </div>
</div>