组件 愿望清单 愿望清单组件

愿望清单组件

具有响应效果和深色主题支持的极简/扁平设计愿望清单组件。

预览

HTML 代码

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

相关组件

愿望清单组件

一个响应式愿望清单组件,采用Glassmorphism设计风格,使用Tailwind CSS,支持暗黑模式,并具有磨砂玻璃效果和随机占位符图片。

打开

愿望清单组件

用于电子商务的 Retro/Vintage Wishlist 组件,具有三重配色方案、简单的复杂性、响应式设计和深色主题支持。

打开

愿望清单组件

用于社交媒体的 Neumorphism 风格的 Wishlist 组件,具有互补的配色方案。它包括使用 Tailwind CSS 的响应式设计,并支持深色模式。仅使用 HTML 和 Tailwind 类,不使用 JavaScript。图片来自 picsum.photos 和 randomuser.me 的头像。

打开