機能コンポーネントコンポーネント - ダークモード UI
ダークモードとアースカラーで設計されたレスポンシブソーシャルメディアコンポーネントで、ソーシャルネットワーキングインターフェイスに適しています。ユーザーのアバター、投稿コンテンツ、インタラクションボタンを備えています。
HTMLコード
<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<h2 class="text-lg font-semibold">John Doe</h2>
<p class="text-gray-400">@john_doe</p>
</div>
</div>
<div class="mb-4">
<p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
<img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
</div>
<div class="flex justify-between text-gray-400">
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Like</span>
</button>
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Comment</span>
</button>
<button class="flex items-center hover:text-white">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
<span class="text-sm">Share</span>
</button>
</div>
</div>