OAuth 버튼 구성 요소

<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-br from-blue-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">

  <div class="w-full max-w-sm p-6 rounded-2xl shadow-xl backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/70 dark:from-gray-700/80 dark:to-gray-800/70 border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105">

    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
      Continue Shopping
    </h2>

    <p class="text-sm text-gray-600 dark:text-gray-300 mb-8 text-center leading-relaxed">
      Sign in or create an account to personalize your experience.
    </p>

    <div class="space-y-4">
      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12.24 10.24v3.53h4.63c-.19 1.13-.76 2.39-1.92 3.12-1.28.84-2.73 1.25-4.22 1.25-3.3 0-6.1-1.78-7.58-4.44C-.03 11.23-.42 8.78.36 6.55c.78-2.23 2.51-3.83 4.8-4.49 2.29-.66 4.77-.3 6.64 1.16 1.48 1.18 2.37 2.82 2.37 4.54h-3.69c0-.49-.15-.97-.43-1.37-.28-.4-.68-.7-1.14-.88-.46-.18-.96-.2-1.46-.06-.5.14-.95.43-1.26.83-.3.4-.46.9-.46 1.42 0 .52.16 1.02.46 1.42.31.4.76.69 1.26.83.5.14 1 .12 1.46-.06.46-.18.86-.48 1.14-.88.29-.4.43-.88.43-1.37h3.69v.01z"/><path d="M22.02 12.02a9 9 0 01-1.85 5.56 8.97 8.97 0 01-5.56 1.85 8.98 8.98 0 01-5.56-1.85 8.97 8.97 0 01-1.85-5.56 8.97 8.97 0 011.85-5.56 8.98 8.98 0 015.56-1.85 8.97 8.97 0 015.56 1.85 8.97 8.97 0 011.85 5.56z" fill="#4285F4"/><circle cx="12" cy="12" r="1" fill="#EA4335"/><circle cx="12" cy="12" r="1" fill="#FBBC05"/><circle cx="12" cy="12" r="1" fill="#34A853"/>
        </svg>
        Continue with Google
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm3.535 7.424c.007-.058.012-.116.012-.175 0-.114-.009-.228-.027-.341-.019-.114-.047-.225-.084-.336-.037-.11-.082-.218-.137-.324-.055-.106-.12-.21-.194-.31-.1-.137-.215-.262-.345-.38-.073-.066-.15-.128-.231-.188-.082-.06-.168-.116-.258-.168-.09-.052-.18-.098-.276-.142-.096-.044-.196-.084-.3-.122-.104-.038-.21-.072-.32-.102-.11-.03-.22-.054-.333-.075C12.333 4.015 12.167 4 12 4c-.167 0-.333.015-.5.045-.167.03-.328.077-.487.14-.158.062-.314.137-.468.225-.154.088-.302.19-.444.3-.142.11-.277.23-.404.36-.127.13-.245.267-.354.41-.11.14-.21.285-.3.435-.09.15-.17.3-.24.456-.07.156-.128.318-.175.485-.047.167-.08.338-.097.51-.017.172-.025.345-.025.518V9h4.375c.007.575.127 1.137.362 1.687.235.55.57.994 1.006 1.332.437.337.954.544 1.55.625.596.08 1.205.042 1.826-.115s1.207-.406 1.748-.777c.541-.37.97-.837 1.286-1.398ZM12 20.915c-1.378-.002-2.738-.29-4.025-.865-1.287-.575-2.482-1.418-3.535-2.496C3.36 16.486 2.518 15.29 1.94 14.004c-.57-1.287-.85-2.646-.848-4.025h4.375v2.85c0 .038.003.076.009.114.006.038.014.076.024.114.01.038.022.074.037.11.015.036.032.07.052.103.02.034.043.065.068.094.026.029.054.056.09.08.035.025.074.047.116.066.042.02.086.037.133.053.047.016.095.028.145.038l.15.018c.074.008.15.006.225-.005.075-.01.15-.025.22-.045.07-.02.138-.047.2-.08.062-.033.12-.07.17-.11.05-.04.094-.084.13-.13.036-.046.064-.093.085-.14.02-.047.034-.095.04-.145.006-.05.008-.1.008-.15l-.015-3.05h4.375V15h-4.375c-.328-.01-.65-.015-.968-.016-.318-.001-.637.003-.95.012-.313.009-.623.027-.93.053-.306.026-.607.062-.9.109-.292.048-.578.106-.856.175-.278.07-.547.15-.805.245-.257.095-.505.2-.74.31-.236.11-.46.223-.672.34-.212.118-.41.24-.59.366-.18.125-.347.252-.5.378-.153.126-.29.25-.407.37-.118.12-.224.238-.317.355-.094.116-.174.23-.238.34-.065.11-.115.215-.15.318-.035.103-.053.204-.055.305v.23h12.5v-2.85z"/>
        </svg>
        Continue with Apple
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.02 0H1.98A1.981 1.981 0 000 1.98v20.04c0 1.093.887 1.98 1.98 1.98h20.04c1.093 0 1.98-.887 1.98-1.98V1.98A1.981 1.981 0 0022.02 0zm-3.05 7.82c-.372 0-.677-.31-.677-.69-.001-.38.304-.69.676-.69.373 0 .677.31.677.69s-.304.69-.676.69zm-1.808 1.91h3.048c.082.91-.497 2.103-1.637 2.103-1.077 0-1.572-.75-1.41-1.53-.001-.001-.001-.002-.001-.003zm-3.23 3.99c.045.029.091.05.138.064l-.062-.02c-.062.01-.122.02-.184.02-.123-.002-.24-.03-.35-.07l-.02-.01-.06-.04c-.05-.03-.098-.06-.145-.1l-.06-.03-.04-.02c-.04-.03-.07-.05-.11-.08l-.07-.04c-.04-.02-.08-.05-.11-.07-.04-.02-.07-.04-.1-.06s-.06-.03-.08-.04l-.04-.02a.208.2088 20.8 1.02c.005.002.01.004.015.006.002.001.004.002.006.003l.006.002h.001a.36.36 0 01.02.01c.01.003.02.006.03.009l.067.02c-.01-.004-.02-.007-.03-.01v.001A.256.2560 25.6 0 0113.88 13.7l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46-.09-.17-.16-.34-.21-.52-.05-.19-.08-.37-.08-.57s.0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05c.001.001.001.002.001.003l-.001.001a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001z"/>
        </svg>
        Continue with Facebook
      </button>
    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
      <span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or</span>
      <div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
    </div>

    <form class="space-y-4">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-gray-900 dark:text-white bg-white dark:bg-gray-800 transition-colors duration-200 text-sm" placeholder="Email address">
      </div>
      <button type="submit" class="w-full flex justify-center px-6 py-3 border border-transparent rounded-xl shadow-sm text-base font-medium text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 ">
        Continue with Email
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
      By continuing, you agree to our <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Terms of Service</a> and <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Privacy Policy</a>.
    </p>
  </div>

</div>