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

ソーシャルコンポーネント

スキューモーフィック スタイルでデザインされたソーシャル コンポーネント セクションは、レスポンシブ エフェクトとダーク テーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
    <div class="flex flex-row space-x-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
        </div>
    </div>
    <div class="mt-6 flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
        <h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
    </div>
</div>

関連コンポーネント

ソーシャルコンポーネントコンポーネント

Skeuomorphismとブログコンテンツ用の単色の配色でデザインされたシンプルなソーシャルメディアコンポーネント。レスポンシブレイアウトとTailwind CSSを使用したダークテーマのサポートが特徴です。

開ける

ソーシャルコンポーネントコンポーネント

Neumorphismスタイルとダークテーマのサポートで設計されたレスポンシブソーシャルメディアコンポーネントで、シンプルなレイアウトと最小限の要素が特徴です。

開ける

ソーシャルコンポーネントコンポーネント

ブルータリズムとパステル調のデザインのダッシュボードのソーシャルコンポーネント。名前、タイトル、アバターを含むユーザープロファイルが表示され、フォロー、メッセージング、共有などのソーシャルアクションのボタンが含まれています。このコンポーネントは応答性が高く、ダークモードをサポートしています。

開ける