OAuth ボタンコンポーネント

```html

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4">

  <div class="w-full max-w-sm">

    <h2 class="text-2xl font-bold text-center text-gray-200 mb-6">Sign In</h2>



    <button class="w-full bg-blue-300 text-blue-900 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-blue-400 transition duration-300">

      <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Icon" class="mr-2">

      Sign in with Google

    </button>



    <button class="w-full bg-gray-300 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-gray-400 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/000000/github.png" alt="GitHub Icon" class="mr-2 dark:filter dark:invert">

      Sign in with GitHub

    </button>



    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md flex items-center justify-center hover:bg-blue-600 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/ffffff/facebook-new.png" alt="Facebook Icon" class="mr-2">

      Sign in with Facebook

    </button>

  </div>

</div>

```