具有 Material Design 美感的响应式产品库组件,具有基于网格的布局和互动元素,适合展示产品或产品组合。包括深色模式支持,并使用类似的配色方案。
<div class="container mx-auto p-4""> <!-- Product Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6""> <!-- Product Card 1 --> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden""> <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover""> <div class="p-4""> <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="flex items-center justify-between mt-3""> <span class="text-xl font-bold text-gray-900 dark:text-white"">$49.99</span> <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button> </div> </div> </div> <!-- Product Card 2 --> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden""> <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover""> <div class="p-4""> <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="flex items-center justify-between mt-3""> <span class="text-xl font-bold text-gray-900 dark:text-white"">$29.99</span> <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button> </div> </div> </div> <!-- Product Card 3 --> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden""> <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover""> <div class="p-4""> <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="flex items-center justify-between mt-3""> <span class="text-xl font-bold text-gray-900 dark:text-white"">$79.99</span> <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button> </div> </div> </div> <!-- Product Card 4 --> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden""> <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image" class="w-full h-48 object-cover""> <div class="p-4""> <h3 class="text-lg font-semibold text-gray-800 dark:text-white"">Product Title 4</h3> <p class="text-gray-600 dark:text-gray-300 mt-1"">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <div class="flex items-center justify-between mt-3""> <span class="text-xl font-bold text-gray-900 dark:text-white"">$19.99</span> <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300"">View Details</button> </div> </div> </div> </div> </div>
一个基于物料设计原则的产品画廊组件,具有响应式设计和深色主题支持。包含占位符图像。
一个复杂的、受纸张/印刷品启发的产品库组件,具有互补色,专为像博客一样的内容消费而设计,具有丰富的细节、响应能力和深色模式支持。
一个简单、响应迅速的产品库组件,采用大地色调,针对深色模式和内容消费进行了优化。非常适合显示项目的博客或电子商务网站。