几何图形背景 Tailwind网站组件

<section class="relative bg-gradient-to-br from-indigo-600 to-purple-700 text-white py-20 overflow-hidden">
            <div class="absolute inset-0">
                <svg class="absolute inset-0 w-full h-full" viewBox="0 0 400 400" fill="none">
                    <circle cx="100" cy="100" r="60" fill="rgba(255,255,255,0.1)"></circle>
                    <rect x="250" y="50" width="80" height="80" fill="rgba(255,255,255,0.1)" transform="rotate(45 290 90)"></rect>
                    <polygon points="50,250 100,200 150,250 100,300" fill="rgba(255,255,255,0.1)"></polygon>
                    <circle cx="320" cy="280" r="40" fill="rgba(255,255,255,0.1)"></circle>
                    <rect x="180" y="180" width="60" height="60" fill="rgba(255,255,255,0.1)" transform="rotate(30 210 210)"></rect>
                </svg>
            </div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center">
                    <h1 class="text-5xl md:text-7xl font-bold mb-6">几何诗学</h1>
                    <p class="text-xl mb-8 opacity-90">在规则中寻找美的定律</p>
                    <div class="flex flex-wrap justify-center gap-6">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                            <div class="w-8 h-8 bg-white rounded-full"></div>
                        </div>
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm flex items-center justify-center transform rotate-45">
                            <div class="w-8 h-8 bg-white"></div>
                        </div>
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-sm flex items-center justify-center">
                            <div class="w-0 h-0 border-l-4 border-r-4 border-b-8 border-transparent border-b-white"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>