제품 카드 구성 요소
스큐어모피즘 디자인 스타일, 흙색 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 제품 카드 구성 요소로, 포트폴리오에 적합합니다. 여기에는 어두운 테마 지원이 포함되며 스타일링에 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>