CCHub Logo CCHub Tailwind Collection
구성 요소 컨테이너 머티리얼 디자인 전자 상거래 컨테이너

머티리얼 디자인 전자 상거래 컨테이너

제품 그리드, 장바구니 요약 및 어두운 테마 지원을 갖춘 반응형 전자 상거래 컨테이너 구성 요소로, 머티리얼 디자인 원칙과 어스 톤 색 구성표를 사용하여 설계되었습니다. 이미지, 제목, 가격, "장바구니에 추가" 버튼이 있는 제품 카드, 추가된 항목으로 업데이트되는 끈적한 장바구니 요약을 포함한 여러 대화형 요소가 있습니다. 레이아웃은 다양한 화면 크기에 맞게 조정되며 모든 요소에는 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>

관련 구성 요소

컨테이너 구성 요소 30

반응형 3D 디자인 컨테이너 구성 요소로, 어두운 테마 지원과 함께 깊이와 몰입도를 위해 3차원 요소를 통합합니다.

열다

컨테이너 구성 요소

전자 상거래를 위한 브루탈리즘 스타일로 설계된 컨테이너 구성 요소로, Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 레이아웃을 특징으로 합니다.

열다

Brutalist 컨테이너 구성 요소

브루탈리즘 스타일과 생생한 색 구성표로 디자인된 단순하지만 대담한 컨테이너 구성 요소로, 비즈니스 또는 기업 웹 사이트에 적합하며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다