瀑布流布局 Tailwind网站组件

<section class="py-16 bg-gray-50">
            <div class="max-w-6xl mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12 text-gray-900">创意作品</h2>
                <div class="columns-1 md:columns-2 lg:columns-3 gap-6 space-y-6">
                    <div class="break-inside-avoid bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                        <div class="h-48 bg-gradient-to-br from-red-400 to-pink-500"></div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg mb-2">海报设计</h3>
                            <p class="text-gray-600 text-sm">现代简约风格的品牌海报设计</p>
                        </div>
                    </div>
                    <div class="break-inside-avoid bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                        <div class="h-64 bg-gradient-to-br from-blue-400 to-indigo-500"></div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg mb-2">网页界面</h3>
                            <p class="text-gray-600 text-sm">响应式企业官网界面设计，注重用户体验</p>
                        </div>
                    </div>
                    <div class="break-inside-avoid bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                        <div class="h-40 bg-gradient-to-br from-green-400 to-emerald-500"></div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg mb-2">Logo设计</h3>
                            <p class="text-gray-600 text-sm">简约现代的企业标志设计</p>
                        </div>
                    </div>
                    <div class="break-inside-avoid bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                        <div class="h-56 bg-gradient-to-br from-yellow-400 to-orange-500"></div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg mb-2">包装设计</h3>
                            <p class="text-gray-600 text-sm">产品包装视觉设计，突出品牌特色</p>
                        </div>
                    </div>
                    <div class="break-inside-avoid bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                        <div class="h-44 bg-gradient-to-br from-purple-400 to-pink-500"></div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg mb-2">插画作品</h3>
                            <p class="text-gray-600 text-sm">原创数字插画</p>
                        </div>
                    </div>
                    <div class="break-inside-avoid bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
                        <div class="h-52 bg-gradient-to-br from-teal-400 to-cyan-500"></div>
                        <div class="p-4">
                            <h3 class="font-bold text-lg mb-2">移动应用</h3>
                            <p class="text-gray-600 text-sm">iOS/Android应用界面设计</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>