ソーシャルコンポーネントコンポーネント
レトロ/ビンテージスタイルのソーシャルメディアコンポーネントは、複数のインタラクティブ要素を備えた豊富なインターフェイスを備え、補色で設計され、ダークモードをサポートします。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4">
<div class="flex mb-4">
<img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
<img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
<div class="flex justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
</div>
</div>
<div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
<span class="cursor-pointer hover:underline">12 Likes</span>
<span class="cursor-pointer hover:underline">3 Comments</span>
</div>
</div>関連コンポーネント
ソーシャルコンポーネントコンポーネント
プロフェッショナルなビジネスサイト向けの鮮やかな色を使用したスキューモーフィックスタイルでデザインされたシンプルなソーシャルコンポーネント、ダークモードをサポートするレスポンシブデザイン。
ソーシャルコンポーネントコンポーネント
ポートフォリオ用に設計されたソーシャルメディアコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークテーマのサポートが特徴です。これには、ユーザーのアバターと名前のプレースホルダーが含まれています。