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

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

魅力的なアニメーションと単色の配色を備えたブログ用のマイクロインタラクションに焦点を当てたソーシャルコンポーネント。

プレビュー

HTMLコード 

<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Social Engagement</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600 transition duration-300 ease-in-out transform hover:scale-110">
        <div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a post about engaging with content effectively in today's digital landscape.</p>
    <img src="https://picsum.photos/600/300" alt="Blog post preview" class="rounded-lg mb-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
    <div class="flex items-center space-x-4">
        <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 dark:hover:bg-blue-400 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
            </svg>
            Share
        </button>
        <button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition duration-300 ease-in-out hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-3.086a2.003 2.003 0 00-3.415 0H5m14-1h-2.586a2.003 2.003 0 00-3.415 0H4m5 0l2 2-2 2m0-4l-2 2-2-2" />
            </svg>
            Comment
        </button>
    </div>
</div>

関連コンポーネント

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

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

開ける

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

ブルータリズムのソーシャルコンポーネントで、ハイコントラスト、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートなど、大胆なデザインを披露しています。ユーザーのアバター、ソーシャルメディアのリンク、プレースホルダー画像が特徴です。

開ける

3Dソーシャルオーサーカード

3Dエフェクトとソーシャルメディアリンクを備えたレスポンシブな著者カードコンポーネントで、ブログ/コンテンツセクション用に設計されています。補色(アイデンティティ/情報に青、アクセント/CTAにオレンジ)が特徴で、ダークモードをサポートし、スタイリングにTailwind CSSを使用しています。デザインは、基本的なレイアウトと最小限の要素を備えた「シンプル」な複雑さですが、「3Dデザイン」は、シャドウとホバー効果を使用して奥行きとエンゲージメントのために組み込まれています。このコンポーネントには、アバター、著者名、短い略歴、ソーシャルメディアのアイコン、「Follow Me」のコールトゥアクションボタンが含まれています。プレースホルダーとして randomuser.me アバターを使用します。

開ける