머티리얼 디자인 전자 상거래 컨테이너
제품 그리드, 장바구니 요약 및 어두운 테마 지원을 갖춘 반응형 전자 상거래 컨테이너 구성 요소로, 머티리얼 디자인 원칙과 어스 톤 색 구성표를 사용하여 설계되었습니다. 이미지, 제목, 가격, "장바구니에 추가" 버튼이 있는 제품 카드, 추가된 항목으로 업데이트되는 끈적한 장바구니 요약을 포함한 여러 대화형 요소가 있습니다. 레이아웃은 다양한 화면 크기에 맞게 조정되며 모든 요소에는 Tailwind CSS dark: 접두사로 정의된 어두운 모드 스타일이 있습니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">
<!-- Sticky Shopping Cart Summary -->
<div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<p class="text-sm">Items: <span class="font-medium">3</span></p>
<p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
</div>
<button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
</div>
</div>관련 구성 요소
소셜 미디어 컨테이너
생생한 색상, 매력적인 마이크로 인터랙션, 어두운 테마 지원을 갖춘 반응형 컨테이너 구성 요소로, 소셜 미디어 인터페이스에 적합합니다. 기능에는 미묘한 호버 효과와 깔끔한 레이아웃이 포함됩니다.
Glassmorphism 포트폴리오 컨테이너
Tailwind CSS를 사용하는 포트폴리오 웹 사이트에 맞게 조정된 다크 모드 지원 기능이 있는 반응형 Glassmorphism 컨테이너 구성 요소입니다. 젖빛 유리 효과, 트라이어드 색 구성표, 여러 인터랙티브 요소가 특징이며 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.