网格布局导航 Tailwind网站组件

<section class="bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="md:col-span-1">
                        <h1 class="text-3xl font-bold text-gray-900 mb-2">网格系统</h1>
                        <p class="text-gray-600">结构化的设计理念</p>
                    </div>
                    <div class="md:col-span-2">
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div class="bg-gray-100 p-4 rounded-lg text-center hover:bg-gray-200 transition-colors cursor-pointer">
                                <div class="w-8 h-8 bg-blue-500 rounded mx-auto mb-2"></div>
                                <span class="text-sm font-medium">功能一</span>
                            </div>
                            <div class="bg-gray-100 p-4 rounded-lg text-center hover:bg-gray-200 transition-colors cursor-pointer">
                                <div class="w-8 h-8 bg-green-500 rounded mx-auto mb-2"></div>
                                <span class="text-sm font-medium">功能二</span>
                            </div>
                            <div class="bg-gray-100 p-4 rounded-lg text-center hover:bg-gray-200 transition-colors cursor-pointer">
                                <div class="w-8 h-8 bg-purple-500 rounded mx-auto mb-2"></div>
                                <span class="text-sm font-medium">功能三</span>
                            </div>
                            <div class="bg-gray-100 p-4 rounded-lg text-center hover:bg-gray-200 transition-colors cursor-pointer">
                                <div class="w-8 h-8 bg-red-500 rounded mx-auto mb-2"></div>
                                <span class="text-sm font-medium">功能四</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>