OAuth Buttons Component

<div class="p-4 sm:p-8 md:p-12 lg:p-16 bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-700 rounded-xl shadow-2xl dark:shadow-none transform hover:scale-105 transition duration-300 ease-in-out">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight leading-tight">
      Connect Your Account
    </h2>
    <p class="text-center text-gray-600 dark:text-gray-300 mb-8 sm:mb-10 text-sm sm:text-base leading-relaxed">
      Unlock full features and personalize your experience by connecting with one of your existing accounts.
    </p>

    <div class="grid gap-4 sm:gap-5 md:gap-6">
      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.007 11.597c.01-.223.01-.447.01-.67-.008-2.607-1.04-5.06-2.914-6.938C17.3 2.19 14.85 1.16 12.247 1.15H12.2c-5.803.015-10.51 4.72-10.51 10.51 0 5.804 4.71 10.51 10.51 10.51 4.904 0 9.117-3.39 10.27-8.15zM12.007 19.86c-4.004 0-7.25-3.24-7.25-7.25 0-4 3.246-7.25 7.25-7.25s7.25 3.25 7.25 7.25c0 4.01-3.245 7.25-7.25 7.25z" />
          <circle cx="12.007" cy="12.007" r="3.74" />
        </svg>
        Continue with Google
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm sm:text-base font-medium text-gray-800 dark:text-white bg-white dark:bg-gray-600 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.372 0 0 5.372 0 12c0 5.304 3.435 9.771 8.204 11.332.6.11.82-.26.82-.577 0-.285-.01-1.04-.015-2.04c-3.338.727-4.043-1.611-4.043-1.611-.546-1.385-1.334-1.755-1.334-1.755-1.09-.74.08-1.02.08-1.02 1.205.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.304 3.491.996.109-.775.424-1.305.773-1.606C7.153 16.711 4.542 15.65 4.542 11.37c0-1.309.46-2.38 1.22-3.22-.122-.303-.529-1.523.116-3.176 0 0 1-.322 3.29 1.23.95-.264 1.956-.396 2.96-.396 1.004 0 2.01.132 2.96.396 2.29-1.552 2.29-1.23 2.29-1.23.645 1.653.238 2.873.116 3.176.76.84 1.22 1.91 1.22 3.22 0 4.29-2.613 5.337-5.093 5.627.427.366.812 1.09.812 2.195 0 1.58-.014 2.855-.014 3.237 0 .32.215.69.825.577C20.565 21.77 24 17.304 24 12c0-6.628-5.372-12-12-12z"/>
        </svg>
        Continue with GitHub
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-black hover:bg-gray-800 dark:bg-gray-900 dark:hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M21.503 7.203c-.222-.843-.75-1.579-1.38-2.208-1.04-1.04-2.276-1.748-3.5-2.072C15 2.658 12 2.658 12 2.658s-3 0-4.623.265C5.753 3.418 4.516 4.126 3.477 5.166c-.63.63-1.157 1.365-1.38 2.208-.262 1.48-.263 4.542-.263 4.542s0 3.063.263 4.542c.222.843.75 1.579 1.38 2.208 1.04 1.04 2.276 1.748 3.5 2.072C8 21.342 11 21.342 11 21.342s3 0 4.623-.265c1.224-.324 2.46-1.032 3.5-2.072.63-.63 1.157-1.365 1.38-2.208.263-1.48.263-4.542.263-4.542s0-3.063-.263-4.542zM9.998 15.352V8.65l6.502 3.351L9.998 15.352z"/>
        </svg>
        Continue with YouTube
      </a>

      <a href="#" class="flex items-center justify-center w-full px-5 py-3 sm:py-3.5 md:py-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500 transition duration-150 ease-in-out transform hover:-translate-y-1">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M7.5 1.5H4C2.62 1.5 1.5 2.62 1.5 4v3.5c0 1.38 1.12 2.5 2.5 2.5h3.5c1.38 0 2.5-1.12 2.5-2.5V4c0-1.38-1.12-2.5-2.5-2.5zM7.5 14H4c-1.38 0-2.5 1.12-2.5 2.5V20c0 1.38 1.12 2.5 2.5 2.5h3.5c1.38 0 2.5-1.12 2.5-2.5v-3.5c0-1.38-1.12-2.5-2.5-2.5zM20 1.5h-3.5c-1.38 0-2.5 1.12-2.5 2.5v3.5c0 1.38 1.12 2.5 2.5 2.5H20c1.38 0 2.5-1.12 2.5-2.5V4c0-1.38-1.12-2.5-2.5-2.5zM20 14h-3.5c-1.38 0-2.5 1.12-2.5 2.5V20c0 1.38 1.12 2.5 2.5 2.5H20c1.38 0 2.5-1.12 2.5-2.5v-3.5c0-1.38-1.12-2.5-2.5-2.5z"/>
        </svg>
        Continue with Instagram
      </a>

    </div>

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

    <form class="space-y-4 sm:space-y-5">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input type="email" id="email" name="email" autocomplete="email" required
          class="appearance-none block w-full px-4 py-2.5 sm:py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-300 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:focus:ring-purple-400 dark:focus:border-purple-400 sm:text-sm md:text-base"
          placeholder="Email address">
      </div>
      <div>
        <label for="password" class="sr-only">Password</label>
        <input type="password" id="password" name="password" autocomplete="current-password" required
          class="appearance-none block w-full px-4 py-2.5 sm:py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm placeholder-gray-400 dark:placeholder-gray-300 text-gray-900 dark:text-white focus:outline-none focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:focus:ring-purple-400 dark:focus:border-purple-400 sm:text-sm md:text-base"
          placeholder="Password">
      </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-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-purple-600">
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">
            Forgot your password?
          </a>
        </div>
      </div>
      <div>
        <button type="submit"
          class="w-full flex justify-center py-2.5 sm:py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm sm:text-base font-medium text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-700 transition duration-150 ease-in-out transform hover:-translate-y-1">
          Sign In
        </button>
      </div>
    </form>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
      Don't have an account? <a href="#" class="font-medium text-purple-600 hover:text-purple-500 dark:text-purple-400 dark:hover:text-purple-300">Sign Up</a>
    </p>
  </div>
</div>