製品カードコンポーネント
Skeuomorphismデザインスタイル、アースカラーの配色、複雑なインタラクションを備えたレスポンシブ製品カードコンポーネントで、ポートフォリオに適しています。ダークテーマのサポートが含まれており、スタイリングにTailwind CSSを使用します。画像はpicsum.photosから、アバターは randomuser.me から提供されています。
HTMLコード
<div class="bg-stone-100 dark:bg-stone-900 min-h-screen p-8 flex flex-wrap items-center justify-center font-sans">
<!-- Product Card 1 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
<div class="relative z-10">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Earthen Vessel</h2>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">Hand-crafted ceramic vessel, ideal for home decor or as a unique gift. Each piece is organically formed and fired to perfection.</p>
<div class="flex items-center justify-center mb-6">
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.9</span>
<span class="text-stone-600 dark:text-stone-400 text-md">(128 Reviews)</span>
</div>
</div>
<div class="flex justify-around items-center mb-6">
<div class="text-stone-800 dark:text-stone-100">
<span class="block text-sm opacity-80">Dimensions:</span>
<span class="text-lg font-bold">15x10 cm</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Weight:</span>
<span class="text-lg font-bold">0.8 kg</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Material:</span>
<span class="text-lg font-bold">Clay</span>
</div>
</div>
<div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
<div class="flex items-center -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Customer Avatar">
<span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+25 Happy customers</span>
</div>
<span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$79.00</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
<button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
Add to Cart
</button>
<button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
<div class="relative z-10">
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Rustic Planter</h2>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A robust planter crafted from recycled oak barrels, perfect for adding a touch of nature indoors or out.</p>
<div class="flex items-center justify-center mb-6">
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.7</span>
<span class="text-stone-600 dark:text-stone-400 text-md">(95 Reviews)</span>
</div>
</div>
<div class="flex justify-around items-center mb-6">
<div class="text-stone-800 dark:text-stone-100">
<span class="block text-sm opacity-80">Dimensions:</span>
<span class="text-lg font-bold">50x40 cm</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Weight:</span>
<span class="text-lg font-bold">5.2 kg</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Material:</span>
<span class="text-lg font-bold">Oak Wood</span>
</div>
</div>
<div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
<div class="flex items-center -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
<span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+18 Happy customers</span>
</div>
<span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$120.00</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
<button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
Add to Cart
</button>
<button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700 ">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
<div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
<div class="relative z-10">
<img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
<h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Terra Cotta Mug</h2>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A charming terra cotta mug, perfect for your morning coffee or evening tea. Hand-painted with natural dyes.</p>
<div class="flex items-center justify-center mb-6">
<div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.6</span>
<span class="text-stone-600 dark:text-stone-400 text-md">(72 Reviews)</span>
</div>
</div>
<div class="flex justify-around items-center mb-6">
<div class="text-stone-800 dark:text-stone-100">
<span class="block text-sm opacity-80">Dimensions:</span>
<span class="text-lg font-bold">10x8 cm</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Weight:</span>
<span class="text-lg font-bold">0.3 kg</span>
</div>
<div class="text-stone-800 dark:text-stone-100 text-center">
<span class="block text-sm opacity-80">Material:</span>
<span class="text-lg font-bold">Terra Cotta</span>
</div>
</div>
<div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
<div class="flex items-center -space-x-3">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Customer Avatar">
<img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Customer Avatar">
<span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+10 Happy customers</span>
</div>
<span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$25.00</span>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
<button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
Add to Cart
</button>
<button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- You might need to add this to your tailwind.config.js for the texture pattern -->
<style>
.bg-pattern-texture {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
}
.dark .bg-pattern-texture {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
}
</style>
</div>関連コンポーネント
製品カードコンポーネント
Tailwind CSSを使用したソーシャルメディアインターフェイス用に設計され、ダークテーマとグレースケールの配色をサポートする、マイクロインタラクションを備えたシンプルなレスポンシブ製品カードコンポーネント。
製品カードコンポーネント
パステルカラーを使用したGlassmorphism曇りガラス効果のレスポンシブ製品カードで、ダークモードがサポートされています。ソーシャルメディアインターフェースに適しています。
製品カードコンポーネント
マテリアルデザインスタイルでデザインされたレスポンシブ製品カードコンポーネントで、グレースケールの配色が特徴です。これには、画像、タイトル、説明、およびTailwind CSSを使用したダークモードをサポートするボタンが含まれています。