ソーシャルコンポーネントコンポーネント
ビジネス/企業のWebサイト向けに設計された複雑なソーシャルコンポーネントセクションであり、マテリアルデザインの原則とグレースケールの配色を使用しています。レスポンシブデザインとダークテーマのサポートが特徴です。
HTMLコード
<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>関連コンポーネント
ソーシャルコンポーネントコンポーネント
ブルータリズムとパステル調のデザインのダッシュボードのソーシャルコンポーネント。名前、タイトル、アバターを含むユーザープロファイルが表示され、フォロー、メッセージング、共有などのソーシャルアクションのボタンが含まれています。このコンポーネントは応答性が高く、ダークモードをサポートしています。
ソーシャルコンポーネントコンポーネント
ポートフォリオ用に設計されたソーシャルメディアコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが特徴です。これには、ユーザーのアバターと名前のプレースホルダーが含まれています。