保存以供将来考虑的产品列表
一个简单、响应式的愿望清单组件,适用于具有微交互的商业/企业网站。具有类似的配色方案(蓝-绿-蓝绿色)、深色主题支持和微妙的悬停动画。该组件显示带有产品图片、名称、价格和作按钮的愿望清单项目。
<div class="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-teal-50 dark:from-slate-800 dark:to-slate-900 rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out hover:shadow-lg"> <div class="flex items-center justify-between mb-6"> <h2 class="text-xl font-semibold text-blue-700 dark:text-teal-400 transition-colors duration-300">Your Wishlist</h2> <span class="bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 text-sm px-3 py-1 rounded-full transition-all duration-300 hover:scale-105">3 items</span> </div> <ul class="space-y-4"> <!-- Wishlist Item 1 --> <li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group"> <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105"> <img src="https://picsum.photos/200/200?random=1" alt="Product" class="object-cover w-full h-full"> <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> </div> <div class="flex-grow"> <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Business Analytics Tool</h3> <p class="text-teal-600 dark:text-teal-400 text-sm">$199.99</p> </div> <div class="flex space-x-2"> <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg> </button> <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> </button> </div> </li> <!-- Wishlist Item 2 --> <li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group"> <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105"> <img src="https://picsum.photos/200/200?random=2" alt="Product" class="object-cover w-full h-full"> <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> </div> <div class="flex-grow"> <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">CRM Software Premium</h3> <p class="text-teal-600 dark:text-teal-400 text-sm">$299.99</p> </div> <div class="flex space-x-2"> <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg> </button> <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> </button> </div> </li> <!-- Wishlist Item 3 --> <li class="flex items-center pb-2 group"> <div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105"> <img src="https://picsum.photos/200/200?random=3" alt="Product" class="object-cover w-full h-full"> <div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> </div> <div class="flex-grow"> <h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Dashboard Template Bundle</h3> <p class="text-teal-600 dark:text-teal-400 text-sm">$149.99</p> </div> <div class="flex space-x-2"> <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" /> </svg> </button> <button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> </svg> </button> </div> </li> </ul> <div class="mt-6 flex justify-between items-center"> <button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900"> Add All to Cart </button> <p class="text-blue-700 dark:text-blue-300 font-medium">Total: <span class="text-teal-600 dark:text-teal-400">$649.97</span></p> </div> </div>
用于社交媒体界面的 3D 风格愿望单组件,具有交互式元素和深色模式支持。
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> <div class="p-4"> <div class="flex items-center space-x-4"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md"> <div class="flex-1"> <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Wishlist Title</h3> <p class="text-gray-600 dark:text-gray-400">A brief description of the wishlist item or purpose goes here.</p> </div> </div> </div> <ul class="divide-y divide-gray-200 dark:divide-gray-700"> <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> <div class="flex items-center justify-between"> <p class="text-gray-800 dark:text-gray-200">Item 1 - Description</p> <img src="https://picsum.photos/50/50?image=10" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md"> </div> </li> <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> <div class="flex items-center justify-between"> <p class="text-gray-800 dark:text-gray-200">Item 2 - Description</p> <img src="https://picsum.photos/50/50?image=20" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md"> </div> </li> <li class="p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"> <div class="flex items-center justify-between"> <p class="text-gray-800 dark:text-gray-200">Item 3 - Description</p> <img src="https://picsum.photos/50/50?image=30" alt="Item Image" class="w-12 h-12 rounded-lg shadow-md"> </div> </li> </ul> <div class="p-4"> <button class="w-full bg-blue-600 dark:bg-blue-500 text-white rounded-lg py-2 hover:bg-blue-700 dark:hover:bg-blue-400 transition-colors">Share Wishlist</button> </div> </div>
专为仪表板设计的响应式 Wishlist 组件,具有单色配色方案和 3D 设计样式。
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105"> <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2> <ul class="w-full"> <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105"> <div class="flex items-center"> <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4"> <div> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 1</h3> <p class="text-gray-600 dark:text-gray-400">Description of item 1.</p> </div> </div> <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button> </li> <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105"> <div class="flex items-center"> <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4"> <div> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 2</h3> <p class="text-gray-600 dark:text-gray-400">Description of item 2.</p> </div> </div> <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button> </li> <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105"> <div class="flex items-center"> <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4"> <div> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 3</h3> <p class="text-gray-600 dark:text-gray-400">Description of item 3.</p> </div> </div> <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button> </li> </ul> </div>
使用 Tailwind CSS 的响应式愿望清单组件,支持深色模式。显示包含图像、标题、价格和删除按钮的项目列表。专为色彩鲜艳的仪表板而设计。
<div class="bg-gray-900 text-gray-200 min-h-screen p-8"> <div class="max-w-4xl mx-auto"> <h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2> <div class="space-y-6"> <!-- Wishlist Item 1 --> <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg"> <img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6"> <div class="flex-grow"> <h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3> <p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p class="text-lg font-bold mt-2 text-orange-400">$199.99</p> </div> <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button> </div> <!-- Wishlist Item 2 --> <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg"> <img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6"> <div class="flex-grow"> <h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3> <p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p class="text-lg font-bold mt-2 text-lime-400">$249.50</p> </div> <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button> </div> <!-- Wishlist Item 3 --> <div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg"> <img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6"> <div class="flex-grow"> <h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3> <p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> <p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p> </div> <button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button> </div> </div> </div> </div>
一个响应式愿望清单组件,采用复古/复古美学设计,具有三重配色方案和深色模式支持,非常适合展示作品或产品。
<div class="bg-gray-900 dark:bg-gray-800 text-gray-100 dark:text-gray-200 p-6 rounded-lg max-w-md mx-auto shadow-lg"> <h2 class="text-3xl font-bold text-center mb-4">My Wishlist</h2> <div class="space-y-4"> <div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg"> <img src="https://picsum.photos/100" alt="Product" class="w-16 h-16 rounded-lg"> <div class="flex-1 ml-4"> <h3 class="text-xl font-semibold">Product Title 1</h3> <p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p> </div> <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button> </div> <div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg"> <img src="https://picsum.photos/100?random=1" alt="Product" class="w-16 h-16 rounded-lg"> <div class="flex-1 ml-4"> <h3 class="text-xl font-semibold">Product Title 2</h3> <p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p> </div> <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button> </div> <div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg"> <img src="https://picsum.photos/100?random=2" alt="Product" class="w-16 h-16 rounded-lg"> <div class="flex-1 ml-4"> <h3 class="text-xl font-semibold">Product Title 3</h3> <p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p> </div> <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button> </div> </div> <div class="mt-6 text-center"> <h4 class="text-2xl font-bold">User: John Doe</h4> <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mt-2"> </div> </div>
专为深色模式设计的响应式愿望清单组件,适用于商业/公司网站。它具有交互式元素和互补配色方案,使用 Tailwind CSS 构建。
<div class="min-h-screen bg-gray-900 text-white p-5"> <h1 class="text-2xl font-bold mb-5">Wishlist</h1> <div class="overflow-x-auto"> <table class="min-w-full bg-gray-800 rounded-lg shadow-lg"> <thead> <tr class="bg-gray-700 text-gray-200"> <th class="py-2 px-4">Item</th> <th class="py-2 px-4">Description</th> <th class="py-2 px-4">Price</th> <th class="py-2 px-4">Actions</th> </tr> </thead> <tbody> <tr class="border-b border-gray-600"> <td class="py-4 px-4 flex items-center"> <img src="https://picsum.photos/50/50" alt="Item 1" class="rounded mr-3"> Item 1 </td> <td class="py-4 px-4">This is a description of item 1.</td> <td class="py-4 px-4">$19.99</td> <td class="py-4 px-4"> <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button> <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button> </td> </tr> <tr class="border-b border-gray-600"> <td class="py-4 px-4 flex items-center"> <img src="https://picsum.photos/50/51" alt="Item 2" class="rounded mr-3"> Item 2 </td> <td class="py-4 px-4">This is a description of item 2.</td> <td class="py-4 px-4">$29.99</td> <td class="py-4 px-4"> <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button> <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button> </td> </tr> <tr class="border-b border-gray-600"> <td class="py-4 px-4 flex items-center"> <img src="https://picsum.photos/50/52" alt="Item 3" class="rounded mr-3"> Item 3 </td> <td class="py-4 px-4">This is a description of item 3.</td> <td class="py-4 px-4">$39.99</td> <td class="py-4 px-4"> <button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button> <button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button> </td> </tr> </tbody> </table> </div> <div class="mt-5 flex justify-between"> <button class="bg-green-600 text-white py-2 px-5 rounded hover:bg-green-500">Move All to Cart</button> <button class="bg-gray-600 text-white py-2 px-5 rounded hover:bg-gray-500">Clear Wishlist</button> </div> </div>
一个响应式愿望清单组件,设计为具有拟物化元素和互补色,适用于深色主题仪表板。
<div class="max-w-xs mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden dark:bg-gray-900"> <div class="p-4"> <h2 class="text-2xl font-bold text-white mb-2">Wishlist</h2> <ul class="space-y-4"> <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between"> <div class="flex items-center space-x-3"> <img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" /> <div> <h3 class="text-lg text-white">Product Name 1</h3> <p class="text-sm text-gray-400">$20.00</p> </div> </div> <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button> </li> <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between"> <div class="flex items-center space-x-3"> <img src="https://picsum.photos/50/51" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" /> <div> <h3 class="text-lg text-white">Product Name 2</h3> <p class="text-sm text-gray-400">$30.00</p> </div> </div> <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button> </li> <li class="bg-gray-700 dark:bg-gray-800 p-3 rounded-md flex items-center justify-between"> <div class="flex items-center space-x-3"> <img src="https://picsum.photos/50/52" alt="Product Image" class="w-12 h-12 rounded-md shadow-md" /> <div> <h3 class="text-lg text-white">Product Name 3</h3> <p class="text-sm text-gray-400">$40.00</p> </div> </div> <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-1 px-3 rounded-md">Add to Cart</button> </li> </ul> </div> </div>
一个响应式愿望清单组件,设计有3D元素、天然色调,并支持深色模式,以展示作品或产品。
<div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-transform 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="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center"> <img src="https://picsum.photos/100/100?random=1" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg"> <div class="flex-grow"> <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-400">Brief description of product 1.</p> </div> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button> </li> <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center"> <img src="https://picsum.photos/100/100?random=2" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg"> <div class="flex-grow"> <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-400">Brief description of product 2.</p> </div> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button> </li> <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center"> <img src="https://picsum.photos/100/100?random=3" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg"> <div class="flex-grow"> <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-400">Brief description of product 3.</p> </div> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button> </li> </ul> <div class="mt-6"> <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Profile</h3> <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mr-4"> <div> <h4 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h4> <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet.</p> </div> </div> </div> </div>
一个简单的粗犷主义风格愿望清单组件,适用于作品集,具有高对比度的类色方案。支持深色模式,使用Tailwind CSS。
<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>
一个为商业网站设计的粗犷风格愿望清单组件,具有灰度配色方案和适度复杂性。响应式设计,使用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>