产品分类展示 Tailwind网站组件

<section class="py-16 bg-green-50"> <div class="max-w-6xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-12 text-green-900">产品分类</h2> <div class="flex flex-wrap justify-center gap-4 mb-12" id="filters-b3c4d5e6"> <button class="px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 transition-colors" onclick="filterProducts('b3c4d5e6', 'all')">全部</button> <button class="px-6 py-2 rounded-full bg-white text-green-600 border border-green-600 hover:bg-green-600 hover:text-white transition-colors" onclick="filterProducts('b3c4d5e6', 'electronics')">电子产品</button> <button class="px-6 py-2 rounded-full bg-white text-green-600 border border-green-600 hover:bg-green-600 hover:text-white transition-colors" onclick="filterProducts('b3c4d5e6', 'fashion')">时尚服装</button> <button class="px-6 py-2 rounded-full bg-white text-green-600 border border-green-600 hover:bg-green-600 hover:text-white transition-colors" onclick="filterProducts('b3c4d5e6', 'home')">家居用品</button> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="products-b3c4d5e6"> <div class="product-item bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow" data-category="electronics"> <div class="w-full h-32 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-4"></div> <h3 class="font-semibold text-lg mb-2">智能音箱</h3> <p class="text-green-600 font-bold">¥599</p> </div> <div class="product-item bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow" data-category="fashion"> <div class="w-full h-32 bg-gradient-to-br from-pink-400 to-red-500 rounded-lg mb-4"></div> <h3 class="font-semibold text-lg mb-2">时尚T恤</h3> <p class="text-green-600 font-bold">¥199</p> </div> <div class="product-item bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow" data-category="home"> <div class="w-full h-32 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg mb-4"></div> <h3 class="font-semibold text-lg mb-2">装饰花瓶</h3> <p class="text-green-600 font-bold">¥299</p> </div> <div class="product-item bg-white rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow" data-category="electronics"> <div class="w-full h-32 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg mb-4"></div> <h3 class="font-semibold text-lg mb-2">无线充电器</h3> <p class="text-green-600 font-bold">¥399</p> </div> </div> </div> </section> <script>
function filterProducts(id, category) {
                var products = document.querySelectorAll('#products-' + id + ' .product-item');
                var buttons = document.querySelectorAll('#filters-' + id + ' button');
                
                buttons.forEach(function(btn) {
                    btn.classList.remove('bg-green-600', 'text-white');
                    btn.classList.add('bg-white', 'text-green-600', 'border', 'border-green-600');
                });
                
                event.target.classList.remove('bg-white', 'text-green-600', 'border', 'border-green-600');
                event.target.classList.add('bg-green-600', 'text-white');
                
                products.forEach(function(product) {
                    if (category === 'all' || product.getAttribute('data-category') === category) {
                        product.style.display = 'block';
                    } else {
                        product.style.display = 'none';
                    }
                });
            }
</script>