列コンポーネント
Tailwind CSS を使用してダークモード用にスタイル設定されたレスポンシブ列コンポーネントで、アバターと画像のプレースホルダーが特徴です。
HTMLコード
<div class="bg-gray-900 text-white p-6">
<h2 class="text-2xl font-bold mb-4">Columns Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Column 1 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User One</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
</div>
<!-- Column 2 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User Two</span>
</div>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<!-- Column 3 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User Three</span>
</div>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
</div>
</div>
</div>