検索コンポーネント

カテゴリ

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

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

ソーシャルインタラクションと共有に関連するコンポーネント

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

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

                <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-300">@john_doe</p>
        </div>
    </div>
    <p class="mt-4 text-gray-800 dark:text-gray-400">Just another day exploring the wonders of nature!</p>
    <img src="https://picsum.photos/400/200" alt="Nature Image" class="mt-4 rounded-lg shadow-lg">
    <div class="mt-4 flex justify-between">
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Like</button>
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Comment</button>
    </div>
</div>

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

レトロ/ビンテージソーシャルコンポーネントコンポーネント、単色の配色とシンプルな複雑さ、ブログ/コンテンツ用に設計されており、ダークテーマがサポートされています。

開けるプレビュー

                ```html
<div class="container mx-auto p-4 dark:bg-gray-800 bg-gray-200">
  <div class="max-w-sm rounded overflow-hidden shadow-lg mx-auto dark:bg-gray-700 bg-white">
    <div class="px-6 py-4">
      <div class="font-bold text-xl mb-2 dark:text-white text-gray-800">Social Post</div>
      <p class="dark:text-gray-300 text-gray-700 text-base">
        This is a simple social media component card, designed with a retro feel and monochromatic colors, suitable for a blog or content site.
      </p>
    </div>
    <div class="px-6 pt-4 pb-2">
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#retro</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#monochromatic</span>
      <span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">#blog</span>
    </div>
    <div class="flex items-center px-6 py-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
      <div class="text-sm">
        <p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
        <p class="text-gray-600 dark:text-gray-400">Aug 14, 1988</p>
      </div>
    </div>
  </div>
</div>
```

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

シンプルなレイアウトと補色配色のレトロ/ビンテージソーシャルメディアコンポーネント。ダークモードをサポートし、応答性があります。

開けるプレビュー

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-md max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-xl">User Name</div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
    This is a sample social media post with a retro feel. #retro #tailwind
  </p>
  <img class="w-full rounded-lg mb-4" src="https://picsum.photos/400/300" alt="Sample Image">
  <div class="flex justify-between items-center">
    <div class="flex text-gray-700 dark:text-gray-300">
      <span class="mr-2">❤️ 120</span>
      <span>💬 30</span>
    </div>
    <div class="text-blue-600 dark:text-blue-400 font-bold">View Comments</div>
  </div>
</div>

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

プロフェッショナルなビジネスサイト向けの鮮やかな色を使用したスキューモーフィックスタイルでデザインされたシンプルなソーシャルコンポーネント、ダークモードをサポートするレスポンシブデザイン。

開けるプレビュー

                <div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Follow us on our platforms!</p>
        <div class="flex mt-4 space-x-4">
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
                <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-400 rounded-full hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500">
                <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-red-500 rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600">
                <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="w-5 h-5">
            </a>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <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>

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

ビジネス/企業のWebサイト向けに設計された複雑なソーシャルコンポーネントセクションであり、マテリアルデザインの原則とグレースケールの配色を使用しています。レスポンシブデザインとダークテーマのサポートが特徴です。

開けるプレビュー

                <div class="max-w-6xl mx-auto p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Connect with Us</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=1" class="w-full h-32 object-cover rounded-lg" alt="Social Image 1">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Twitter</h3>
                <p class="text-gray-600 dark:text-gray-400">Stay updated with our latest tweets and news.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Twitter</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=2" class="w-full h-32 object-cover rounded-lg" alt="Social Image 2">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join Us on LinkedIn</h3>
                <p class="text-gray-600 dark:text-gray-400">Connect with us professionally and grow your network.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit LinkedIn</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=3" class="w-full h-32 object-cover rounded-lg" alt="Social Image 3">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Like Us on Facebook</h3>
                <p class="text-gray-600 dark:text-gray-400">Join our community and stay updated with our activities.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Facebook</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=4" class="w-full h-32 object-cover rounded-lg" alt="Social Image 4">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Subscribe to Our YouTube</h3>
                <p class="text-gray-600 dark:text-gray-400">Watch our latest videos and tutorials.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit YouTube</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=5" class="w-full h-32 object-cover rounded-lg" alt="Social Image 5">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Instagram</h3>
                <p class="text-gray-600 dark:text-gray-400">Catch a glimpse of our behind-the-scenes.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Instagram</a>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
            <img src="https://picsum.photos/400/200?random=6" class="w-full h-32 object-cover rounded-lg" alt="Social Image 6">
            <div class="mt-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Connect on GitHub</h3>
                <p class="text-gray-600 dark:text-gray-400">Explore our projects and collaborations.</p>
                <a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit GitHub</a>
            </div>
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <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>

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

レトロ/ビンテージの美学でデザインされたレスポンシブなソーシャルメディアコンポーネントで、複数のインタラクティブ要素とダークテーマを備えた豊富なインターフェイスを備えています。

開けるプレビュー

                <div class="bg-amber-400 dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h1 class="text-4xl font-bold text-center text-brown-600 dark:text-yellow-400">Retro Social Media</h1>
    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-lg font-semibold text-black dark:text-white">John Doe</h2>
                <p class="text-gray-700 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Just enjoyed a retro gaming night! Who's up for some Mario Kart? 🎮</p>
        <img class="mt-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Retro Gaming">
        <div class="mt-4 flex justify-between">
            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">Like ❤️</button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">Comment 💬</button>
            <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600">Share 🔗</button>
        </div>
    </div>

    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-lg font-semibold text-black dark:text-white">Recent Posts</h3>
        <div class="mt-4 space-y-4">
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-300">Loved the concert last night! 🎤</p>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Mike Lee</h4>
                    <p class="text-gray-600 dark:text-gray-300">Throwback to my first Car Rally! 🚗</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

単色の配色のダークモードで設計されたポートフォリオコンポーネント。シンプルなレイアウトで作品や製品を展示しています。

開けるプレビュー

                <div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
            <h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
            <h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
            <h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
            <h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
    </div>
    <hr class="my-6 border-gray-700" />
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
            <div>
                <h4 class="text-lg font-semibold">Your Name</h4>
                <p class="text-gray-400">Your Title or Profession</p>
            </div>
        </div>
        <a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
    </div>
</div>

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

Tailwind CSSを使用した、魅力的なアニメーションとダークテーマを備えたシンプルなレスポンシブソーシャルメディアコンポーネント。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transition-transform transform hover:scale-105 duration-300 ease-in-out">
    <div class="flex items-center space-x-4 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-700 dark:text-gray-300">This is a sample post demonstrating social media interactions with engaging microinteractions.</p>
    </div>
    <div class="flex space-x-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Like
        </button>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Comment
        </button>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded transition duration-200 ease-in-out">
            Share
        </button>
    </div>
</div>