客户评价展示 Tailwind网站组件

<section class="py-16 px-4 bg-gradient-to-r from-indigo-50 to-purple-50 rounded-3xl mb-16" id="review_b7c3d8e9"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">客户评价</h2> <p class="text-gray-600 max-w-2xl mx-auto">听听我们客户的真实反馈</p> </div> <div class="max-w-4xl mx-auto relative overflow-hidden"> <div class="review-container flex transition-transform duration-500 ease-in-out"> <div class="review-slide flex-none w-full"> <div class="bg-white rounded-2xl shadow-lg p-8 mx-4"> <div class="flex items-center mb-6"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%23f59e0b'/%3E%3Ctext x='30' y='35' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3E张%3C/text%3E%3C/svg%3E" class="w-15 h-15 rounded-full mr-4" alt="客户头像"> <div> <h4 class="font-semibold text-gray-800">张总 - 科技公司CEO</h4> <div class="flex text-yellow-400 mt-1"> <span>★★★★★</span> </div> </div> </div> <p class="text-gray-600 text-lg leading-relaxed">"服务非常专业，团队响应迅速，帮助我们公司成功实现了数字化转型。强烈推荐！"</p> </div> </div> <div class="review-slide flex-none w-full"> <div class="bg-white rounded-2xl shadow-lg p-8 mx-4"> <div class="flex items-center mb-6"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%2306b6d4'/%3E%3Ctext x='30' y='35' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3E李%3C/text%3E%3C/svg%3E" class="w-15 h-15 rounded-full mr-4" alt="客户头像"> <div> <h4 class="font-semibold text-gray-800">李经理 - 制造业企业</h4> <div class="flex text-yellow-400 mt-1"> <span>★★★★★</span> </div> </div> </div> <p class="text-gray-600 text-lg leading-relaxed">"系统稳定性很好，功能齐全，客服支持也很到位。合作两年来没有出现过重大问题。"</p> </div> </div> <div class="review-slide flex-none w-full"> <div class="bg-white rounded-2xl shadow-lg p-8 mx-4"> <div class="flex items-center mb-6"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='%2310b981'/%3E%3Ctext x='30' y='35' text-anchor='middle' fill='white' font-size='20' font-weight='bold'%3E王%3C/text%3E%3C/svg%3E" class="w-15 h-15 rounded-full mr-4" alt="客户头像"> <div> <h4 class="font-semibold text-gray-800">王总监 - 零售连锁</h4> <div class="flex text-yellow-400 mt-1"> <span>★★★★☆</span> </div> </div> </div> <p class="text-gray-600 text-lg leading-relaxed">"价格合理，性价比很高。帮助我们提升了运营效率，节省了不少人力成本。"</p> </div> </div> </div> <div class="flex justify-center mt-8 space-x-2"> <button class="review-dot w-3 h-3 rounded-full bg-indigo-500 transition-colors duration-200"></button> <button class="review-dot w-3 h-3 rounded-full bg-gray-300 transition-colors duration-200"></button> <button class="review-dot w-3 h-3 rounded-full bg-gray-300 transition-colors duration-200"></button> </div> </div> </section> <script>
(function() {
                    var currentSlide = 0;
                    var slides = document.querySelectorAll('#review_b7c3d8e9 .review-slide');
                    var dots = document.querySelectorAll('#review_b7c3d8e9 .review-dot');
                    var container = document.querySelector('#review_b7c3d8e9 .review-container');
                    
                    function showSlide(index) {
                        container.style.transform = 'translateX(-' + (index * 100) + '%)';
                        dots.forEach(function(dot, i) {
                            dot.className = i === index ? 'review-dot w-3 h-3 rounded-full bg-indigo-500 transition-colors duration-200' : 'review-dot w-3 h-3 rounded-full bg-gray-300 transition-colors duration-200';
                        });
                    }
                    
                    function nextSlide() {
                        currentSlide = (currentSlide + 1) % slides.length;
                        showSlide(currentSlide);
                    }
                    
                    dots.forEach(function(dot, index) {
                        dot.addEventListener('click', function() {
                            currentSlide = index;
                            showSlide(currentSlide);
                        });
                    });
                    
                    setInterval(nextSlide, 4000);
                })();
</script>