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

OAuth ボタンコンポーネント

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

プレビュー

HTMLコード 

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

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

開ける

OAuth ボタンコンポーネント

Skeuomorphism デザイン、類似のカラースキーム、複雑なインタラクションを備えたレスポンシブ OAuth ボタンコンポーネントで、ソーシャル メディア インターフェイスに適しています。ダーク テーマのサポートが含まれており、JavaScript を使用せずにスタイル設定に Tailwind CSS を使用します。画像はLorem Picsumと RandomUser.me から提供されました。

開ける

OAuth ボタンコンポーネント

シンプルでレスポンシブな OAuth ボタン コンポーネントで、鮮やかな配色を備えたスキューモーフィック スタイルで設計され、e コマース プラットフォームに合わせて調整され、ダーク モードをサポートします。

開ける