製品カードコンポーネント
Tailwind CSS を使用してブルータリズム スタイルでデザインされたレスポンシブ プロダクト カード コンポーネントで、ダーク テーマのサポートとプレースホルダー画像の使用が特徴です。
HTMLコード
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/201" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/202" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/203" alt="Product Image">
<div class="p-6">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Product Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">This is a short description of the product.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<p class="ml-2 text-gray-800 dark:text-white">Seller Name</p>
</div>
</div>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #2d3748;
}
.text-gray-600 {
color: #a0aec0;
}
.border-gray-300 {
border-color: #4a5568;
}
}
</style>