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

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

トライアドカラーの配色でポートフォリオアイテムを展示するブルートスタイルのソーシャルコンポーネントで、作品や製品の展示に最適です。

プレビュー

HTMLコード 

<div class="max-w-6xl mx-auto p-6 space-y-8">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200">My Portfolio</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 1</h2>
            <p class="text-gray-600 dark:text-gray-400">A short description of the first portfolio item.</p>
            <div class="mt-4 flex space-x-3">
                <a href="#" class="p-2 bg-blue-500 text-white rounded-lg dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600">View More</a>
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full"> 
            </div>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A short description of the second portfolio item.</p>
            <div class="mt-4 flex space-x-3">
                <a href="#" class="p-2 bg-red-500 text-white rounded-lg dark:bg-red-700 hover:bg-red-600 dark:hover:bg-red-600">View More</a>
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </div>
        </div>
        <div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
            <h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A short description of the third portfolio item.</p>
            <div class="mt-4 flex space-x-3">
                <a href="#" class="p-2 bg-green-500 text-white rounded-lg dark:bg-green-700 hover:bg-green-600 dark:hover:bg-green-600">View More</a>
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
            </div>
        </div>
    </div>
</div>

関連コンポーネント

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

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

開ける

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

予約および予約システム用の複雑なインダストリアルスタイルのソーシャルコンポーネントで、クールなニュートラル、露出した要素、ダークモードのサポートが特徴です。予約および予約システム用に設計されています。

開ける

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

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

開ける