愿望清单

愿望清单组件

一个为商业网站设计的粗犷风格愿望清单组件，具有灰度配色方案和适度复杂性。响应式设计，使用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>

愿望清单组件 - 材料设计

一个灵感来自材料设计的愿望清单组件，具有响应式设计和暗黑主题支持。

打开预览

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

类别