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

위시리스트 컴포넌트

포트폴리오를 위한 단순하고 브루탈리즘 스타일의 위시리스트 컴포넌트로, 고대비의 유사한 색 구성표를 특징으로 합니다. Tailwind CSS를 사용한 다크 모드 지원으로 반응합니다.

미리 보기

HTML 코드 

<div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
  <div class="container mx-auto p-4">
    <div class="border-4 border-black dark:border-white p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

위시리스트 컴포넌트

고대비 색상 그라데이션과 부드러운 전환이 있는 간단하고 반응이 빠른 위시리스트 구성 요소로 비즈니스/기업 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Glassmorphism_Wishlist_Component

데이트/소셜 플랫폼에 최적화된 오션/블루 톤의 Glassmorphism 디자인을 특징으로 하는 복잡하고 반응형 위시리스트 구성 요소입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

위시리스트 컴포넌트

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

열다