CCHub Logo CCHub Tailwind Collection
コンポーネント ソーシャルログイン ソーシャルログインコンポーネント

ソーシャルログインコンポーネント

単色の配色を使用したダークモード用に設計されたレスポンシブソーシャルログインコンポーネント。インタラクティブな機能を備えたブログやコンテンツの消費に適しています。

プレビュー

HTMLコード 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

関連コンポーネント

ソーシャルログインコンポーネント

ダッシュボード用に設計された複雑で応答性の高いソーシャルログインコンポーネント。グレースケールの配色でダークモードUIを利用します。ソーシャルプロバイダーボタン、メール/パスワードフォーム、「Remember me」トグル、代替ログインオプション付きのセパレーターを備えています。画像イラストで完全にレスポンシブで、ダークテーマのサポートにTailwind CSSとdark:プレフィックスを使用します。JavaScript は必要ありません。

開ける

マテリアルデザインソーシャルログインコンポーネント

マテリアルデザインソーシャルログインコンポーネント、補色配色、適度な複雑さ、ブログ/コンテンツ用、Tailwind CSSを使用したダークモードサポートによるレスポンシブ。

開ける

ソーシャルログインコンポーネント

グレースケールカラーとMicrointeractionsデザインスタイルを使用したシンプルでレスポンシブなソーシャルログインコンポーネントで、Tailwind CSSを使用したダークテーマをサポートしています。ソーシャルアイコンの微妙なホバーアニメーションが特徴です。

開ける