検索コンポーネント

カテゴリ

OAuth ボタン

サードパーティサービスによる認証用のボタン

OAuth ボタンコンポーネント

ニューモーフィズムでスタイル設定された OAuth 認証ボタンの Web コンポーネントで、ポートフォリオ用に設計されており、ダークテーマをサポートするレスポンシブレイアウトが含まれています。

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-700">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Connect with Us</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Google Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Google</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="Facebook Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with Facebook</span>
            </a>
            <a href="#" class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg transition-transform transform hover:scale-105">
                <img src="https://picsum.photos/30?blur=1" alt="GitHub Logo" class="mr-3 rounded-full">
                <span class="text-gray-700 dark:text-white">Sign in with GitHub</span>
            </a>
        </div>
    </div>
</div>

OAuth ボタンコンポーネント

ダークモード用に設計されたレスポンシブなOAuthボタンコンポーネントで、鮮やかな配色で、プロフェッショナルなビジネスWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-6">
    <h2 class="text-4xl font-bold text-white mb-6">Login with OAuth</h2>
    <div class="flex flex-col gap-4 w-full max-w-md">
        <a href="#" class="flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-800 dark:hover:bg-red-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Facebook Logo" class="w-6 h-6 mr-3" />
            <span>Continue with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 text-white font-semibold py-3 rounded-md shadow-md transition duration-300">
            <img src="https://randomuser.me/api/portraits/men/40.jpg" alt="LinkedIn Logo" class="w-6 h-6 mr-3" />
            <span>Continue with LinkedIn</span>
        </a>
    </div>
    <p class="mt-6 text-gray-400">Or</p>
    <a href="#" class="mt-2 text-white underline">Login with Email</a>
</div>

OAuth ボタンコンポーネント

レスポンシブエフェクトとダークテーマのサポートを備えたGlassmorphism OAuthボタンコンポーネント。

開けるプレビュー

                <section class="relative bg-gray-100 dark:bg-gray-900 py-20">
  <div class="absolute inset-0 bg-cover bg-center backdrop-filter backdrop-blur-lg" style="background-image: url('https://picsum.photos/1920/1080');"></div>
  <div class="relative container mx-auto px-4">
    <div class="max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-8">
      <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Login</h2>
      <div class="flex flex-col space-y-4">
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-google-logo.png" alt="Google Logo">
          Sign in with Google
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-facebook-logo.png" alt="Facebook Logo">
          Sign in with Facebook
        </button>
        <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
          <img class="h-5 w-5 mr-2" src="/placeholder-twitter-logo.png" alt="Twitter Logo">
          Sign in with Twitter
        </button>
      </div>
    </div>
  </div>
</section>

OAuth ボタンコンポーネント

Tailwind CSS を使用してダークモードで設計されたレスポンシブ OAuth ボタンコンポーネントで、暗い背景と暗い環境向けに最適化された UI 要素が特徴です。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl font-bold mb-4 text-center">Login with</h2>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-between bg-red-600 text-white rounded-lg p-3 hover:bg-red-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://picsum.photos/30/30" alt="Google" class="rounded-full mr-3" />
                    <span>Google</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-blue-600 text-white rounded-lg p-3 hover:bg-blue-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Facebook" class="rounded-full mr-3" />
                    <span>Facebook</span>
                </div>
                <span>></span>
            </a>
            <a href="#" class="flex items-center justify-between bg-gray-600 text-white rounded-lg p-3 hover:bg-gray-500 transition duration-300">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Twitter" class="rounded-full mr-3" />
                    <span>Twitter</span>
                </div>
                <span>></span>
            </a>
        </div>
    </div>
</div>

OAuth ボタンコンポーネント

スキューモーフィックスタイルでデザインされた OAuth ボタン、レスポンシブ効果、Tailwind CSS を使用したダークテーマのサポートを特徴とする Web コンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Sign in with</h2>
    <div class="grid grid-cols-1 gap-4">
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://picsum.photos/40" alt="Google" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Facebook" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 transform transition duration-300 hover:scale-105">
            <img src="https://randomuser.me/api/portraits/women/46.jpg" alt="Twitter" class="mr-2 rounded-full">
            <span class="font-medium text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

OAuth ボタンコンポーネント

ブルータリズムの美学とTailwind CSSでデザインされたOAuthボタンのセットで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h1 class="text-4xl font-extrabold text-black dark:text-white mb-5">Login with</h1>
    <div class="flex space-x-4">
        <a href="#" class="bg-blue-500 dark:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-400 dark:hover:bg-blue-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=1" alt="OAuth Provider 1" class="inline-block mr-2 rounded-full">
            Provider 1
        </a>
        <a href="#" class="bg-red-500 dark:bg-red-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-red-400 dark:hover:bg-red-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=2" alt="OAuth Provider 2" class="inline-block mr-2 rounded-full">
            Provider 2
        </a>
        <a href="#" class="bg-green-500 dark:bg-green-700 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:bg-green-400 dark:hover:bg-green-600 transition-all duration-300 transform hover:scale-105">
            <img src="https://picsum.photos/30?random=3" alt="OAuth Provider 3" class="inline-block mr-2 rounded-full">
            Provider 3
        </a>
    </div>
</div>

OAuth ボタンコンポーネント

3D デザインスタイル、ダークテーマのサポート、プレースホルダー画像を備えたレスポンシブ OAuth ボタンコンポーネント。このコンポーネントには、Google、Facebook、Twitter、LinkedIn のボタンがあり、深度とエンゲージメントのホバー効果があります。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
            <img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
            Google
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
            <img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
            Facebook
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            <img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
            Twitter
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
            <img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
            LinkedIn
        </a>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: #ffffff;
        }
    }
</style>

OAuth ボタンコンポーネント

3D デザインスタイル、レスポンシブエフェクト、ダークテーマのサポート、プレースホルダー画像を備えた OAuth ボタンを備えた Web コンポーネント。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
  <div class="flex space-x-4">
    <a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
      Google
    </a>
    <a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
      Facebook
    </a>
    <a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
      Twitter
    </a>
  </div>
</div>

OAuth ボタンコンポーネント 1

魅力的なアニメーションとダークモードのサポートを備えたOAuthボタンを表示するコンポーネントで、デザインにTailwind CSSを利用しています。ボタンは微妙なマイクロインタラクションでユーザーのアクションに応答し、画像はランダムなプレースホルダーソースから含まれます。

開けるプレビュー

                <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Google
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Facebook
    </button>
    <button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
        <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
        Sign in with Twitter
    </button>
</div>
<style>
    /* Dark Mode Styles */
    @media (prefers-color-scheme: dark) {
        button {
            background-color: #1e3a8a;
        }
    }
</style>