CCHub Logo CCHub Tailwind Collection
구성 요소 위시리스트 위시리스트 컴포넌트

위시리스트 컴포넌트

비즈니스 웹사이트를 위한 브루탈리즘 스타일의 위시리스트 구성 요소로, 회색조 색 구성표와 적당한 복잡성을 특징으로 합니다. Tailwind CSS 클래스를 사용하여 다크 모드를 지원하는 반응형 디자인입니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
  <h2 class="text-2xl font-bold mb-4 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Wishlist</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 1</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$99.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 2</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$149.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">Out of Stock</div>
    </div>
    <div class="border-4 border-gray-900 dark:border-gray-100 p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Product Image" class="mb-4 border-4 border-gray-900 dark:border-gray-100">
      <h3 class="text-xl font-bold mb-2">Product Title 3</h3>
      <p class="mb-2">Short description of the product.</p>
      <p class="font-bold mb-4">$79.99</p>
      <button class="bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-4 py-2 border-4 border-gray-900 dark:border-gray-100">Add to Cart</button>
      <div class="absolute top-0 right-0 mt-2 mr-2 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 px-2 py-1 text-sm">In Stock</div>
    </div>
  </div>
</div>

관련 구성 요소

위시리스트 컴포넌트

레트로/빈티지 디자인 미학으로 스타일링된 반응형 위시리스트 구성 요소로, 전자 상거래를 위한 단색 구성표를 사용합니다.

열다

위시리스트 컴포넌트

Tailwind CSS를 사용하여 다크 모드에서 설계된 반응형 위시리스트 구성 요소입니다. 이미지, 설명 및 사용자 아바타가 있는 항목에 대한 카드 레이아웃을 특징으로 하며 어두운 테마와 반응형 효과를 지원합니다.

열다

위시리스트 컴포넌트

Tailwind CSS를 사용하는 Glassmorphism 디자인 스타일의 반응형 위시리스트 구성 요소로, 젖빛 유리와 같은 효과와 임의의 자리 표시자 이미지가 있는 다크 모드를 지원합니다.

열다