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

愿望清单组件

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

相关组件

愿望清单组件

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

打开

愿望清单组件

一个简单、响应式的愿望清单组件,适用于具有微交互的商业/企业网站。具有类似的配色方案(蓝-绿-蓝绿色)、深色主题支持和微妙的悬停动画。该组件显示带有产品图片、名称、价格和作按钮的愿望清单项目。

打开

愿望清单组件

专为仪表板设计的响应式 Wishlist 组件,具有单色配色方案和 3D 设计样式。

打开