CCHub Logo CCHub Tailwind Collection
コンポーネント OAuth ボタン OAuth ボタンコンポーネント

OAuth ボタンコンポーネント

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

プレビュー

HTMLコード 

<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 ボタンコンポーネント

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

開ける

OAuth ボタンコンポーネント

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

開ける

OAuth ボタンコンポーネント

魅力的なアニメーションとアース トーンの色でデザインされたレスポンシブ OAuth ボタン コンポーネントで、ソーシャル メディア インターフェイスに適しており、ダーク テーマをサポートしています。

開ける