核心功能介绍 Tailwind网站组件

<section class="bg-white py-16 px-6 rounded-lg shadow-sm mb-16">
                <div class="max-w-6xl mx-auto">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                        <div>
                            <h2 class="text-3xl md:text-4xl font-light text-gray-800 mb-6 leading-tight">核心功能特性</h2>
                            <p class="text-gray-600 mb-8 text-lg leading-relaxed">为您的业务提供全方位的功能支持，助力企业数字化转型升级</p>
                            <div class="space-y-6">
                                <div class="flex items-start space-x-4 group">
                                    <div class="w-8 h-8 border-2 border-blue-300 rounded-full flex items-center justify-center mt-1 group-hover:bg-blue-100 transition-colors duration-200">
                                        <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-800 mb-1">数据可视化</h3>
                                        <p class="text-gray-600">直观的图表和报表，让数据分析更加简单高效</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-4 group">
                                    <div class="w-8 h-8 border-2 border-green-300 rounded-full flex items-center justify-center mt-1 group-hover:bg-green-100 transition-colors duration-200">
                                        <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-800 mb-1">实时监控</h3>
                                        <p class="text-gray-600">7×24小时系统监控，确保业务稳定运行</p>
                                    </div>
                                </div>
                                <div class="flex items-start space-x-4 group">
                                    <div class="w-8 h-8 border-2 border-purple-300 rounded-full flex items-center justify-center mt-1 group-hover:bg-purple-100 transition-colors duration-200">
                                        <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-800 mb-1">智能自动化</h3>
                                        <p class="text-gray-600">减少人工操作，提升工作效率和准确性</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="relative">
                            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-2xl">
                                <div class="grid grid-cols-2 gap-4">
                                    <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                                        <div class="w-8 h-8 bg-blue-100 rounded-lg mb-3"></div>
                                        <div class="h-2 bg-gray-100 rounded mb-2"></div>
                                        <div class="h-2 bg-gray-100 rounded w-3/4"></div>
                                    </div>
                                    <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                                        <div class="w-8 h-8 bg-green-100 rounded-lg mb-3"></div>
                                        <div class="h-2 bg-gray-100 rounded mb-2"></div>
                                        <div class="h-2 bg-gray-100 rounded w-2/3"></div>
                                    </div>
                                    <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                                        <div class="w-8 h-8 bg-purple-100 rounded-lg mb-3"></div>
                                        <div class="h-2 bg-gray-100 rounded mb-2"></div>
                                        <div class="h-2 bg-gray-100 rounded w-4/5"></div>
                                    </div>
                                    <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
                                        <div class="w-8 h-8 bg-yellow-100 rounded-lg mb-3"></div>
                                        <div class="h-2 bg-gray-100 rounded mb-2"></div>
                                        <div class="h-2 bg-gray-100 rounded w-1/2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>