위시리스트

위시리스트 컴포넌트

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

                <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>

위시리스트 컴포넌트

대시보드를 위한 심플한 단색 디자인의 다크 모드 위시리스트 컴포넌트

미리보기 열기

                <div class="bg-gray-900 text-gray-200 dark:bg-gray-800 dark:text-gray-100 min-h-screen p-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-gray-100 dark:text-gray-50">My Wishlist</h2>
    
    <!-- Wishlist Item 1 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1018/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 1</h3>
          <p class="text-gray-400 dark:text-gray-300">$19.99</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1015/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 2</h3>
          <p class="text-gray-400 dark:text-gray-300">$29.50</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Wishlist Item 3 -->
    <div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center">
        <img src="https://picsum.photos/id/1016/60/60" alt="Product Image" class="rounded-md mr-4">
        <div>
          <h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 3</h3>
          <p class="text-gray-400 dark:text-gray-300">$9.00</p>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

위시리스트 컴포넌트

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

미리보기 열기

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
        <p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
    </div>
    <div class="divide-y divide-gray-300 dark:divide-gray-600">
        <!-- Item 1 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $120</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 2 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $250</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
        <!-- Item 3 -->
        <div class="flex items-center justify-between p-4">
            <img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
            <div class="ml-4">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
                <span class="text-gray-500 dark:text-gray-400">Price: $80</span>
            </div>
            <button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
                Add to Cart
            </button>
        </div>
    </div>
    <div class="px-6 py-4">
        <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
        <div class="mt-2 flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
            <div class="ml-2">
                <p class="text-gray-900 dark:text-gray-100">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">[email protected]</p>
            </div>
        </div>
    </div>
</div>

위시리스트 컴포넌트

브루탈리즘 접근 방식으로 스타일링된 단순한 위시리스트 구성 요소로, 작업이나 제품을 선보이기 위해 설계된 그레이스케일 색 구성표를 사용합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
    <ul class="space-y-4">
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
    </ul>
</div>

위시리스트 컴포넌트

마이크로 인터랙션과 그레이스케일 색 구성표가 있는 간단한 전자 상거래 위시리스트 구성 요소로, 반응형 디자인과 다크 모드 지원에 최적화되어 있습니다.

미리보기 열기

                <div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
    <ul class="space-y-4">
        <li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
            <div class="flex-1 mx-4">
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-500 dark:text-gray-400">$19.99</p>
            </div>
            <button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
        </li>
        <li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/100/101" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
            <div class="flex-1 mx-4">
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-500 dark:text-gray-400">$29.99</p>
            </div>
            <button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
        </li>
    </ul>
    <button class="mt-6 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-900 dark:hover:bg-gray-300 transition duration-300">Move to Cart</button>
</div>

위시리스트 컴포넌트

3D 디자인 스타일, 파스텔 색상 구성표 및 비즈니스 웹사이트를 위한 반응형 디자인을 갖춘 위시리스트 구성 요소로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
                <span class="text-purple-600 dark:text-purple-400">$29.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
                <span class="text-purple-600 dark:text-purple-400">$39.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
                <span class="text-purple-600 dark:text-purple-400">$49.99</span>
            </div>
        </li>
    </ul>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-gray-700 dark:text-gray-300">Total:</span>
        <span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
    </div>
    <button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>

위시리스트 컴포넌트

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

미리보기 열기

                <div class="min-h-screen bg-gray-900 flex items-center justify-center">
    <div class="w-full max-w-2xl p-6 bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold text-white mb-4">My Wishlist</h2>
        <div class="space-y-4">
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 1</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 2</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
            <div class="flex items-center bg-gray-700 rounded-lg p-4">
                <img src="https://picsum.photos/80/80" alt="Item Image" class="rounded-full w-16 h-16 mr-4">
                <div>
                    <h3 class="text-xl text-white">Item Title 3</h3>
                    <p class="text-gray-400">Short description of the item goes here.</p>
                </div>
            </div>
        </div>
    </div>
</div>

위시리스트 컴포넌트 - 머티리얼 디자인

Material Design에서 영감을 받은 위시리스트 컴포넌트는 반응형 디자인과 어두운 테마를 지원합니다.

미리보기 열기

                <div class='p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-gray-800'>
  <div class='text-center space-y-2 sm:text-left'>
    <div class='space-y-0.5'>
      <p class='text-lg text-black font-semibold dark:text-white'>
        Product Name
      </p>
      <p class='text-gray-500 font-medium dark:text-gray-300'>
        $19.99
      </p>
    </div>
    <button class='px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2 dark:focus:ring-offset-gray-800'>
      Remove
    </button>
  </div>
  <img class='block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0' src='https://picsum.photos/200' alt='Product Image'>
</div>

위시리스트 컴포넌트

플레이스홀더 이미지와 어두운 테마를 특징으로 하는 미니멀리스트 위시리스트 구성 요소입니다.

미리보기 열기

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-900 dark:text-white">My Wishlist</h2>
        <ul class="mt-4 space-y-4">
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
            <li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div class="flex items-center">
                    <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
                    <div>
                        <h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
                    </div>
                </div>
                <button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
            </li>
        </ul>
    </div>
</div>

위시리스트 컴포넌트

반응형 효과와 어두운 테마를 지원하는 미니멀리스트/플랫 디자인 위시리스트 구성 요소입니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">My Wishlist</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1018/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">$19.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="flex items-center">
      <img class="w-16 h-16 object-cover rounded mr-4" src="https://picsum.photos/id/1015/100/100" alt="Product image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">$29.99</p>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
</div>

카테고리