彩色创意横幅 Tailwind网站组件

<section class="relative bg-gradient-to-br from-pink-400 via-purple-400 to-indigo-500 text-white rounded-3xl overflow-hidden">
            <div class="absolute inset-0 opacity-20">
                <svg class="absolute top-10 left-10 w-32 h-32" viewBox="0 0 200 200" fill="none">
                    <path d="M50 100C50 80 70 60 90 60C110 60 130 80 130 100C130 120 150 140 170 140" stroke="currentColor" stroke-width="3" fill="none"></path>
                </svg>
                <svg class="absolute bottom-10 right-10 w-24 h-24" viewBox="0 0 200 200" fill="none">
                    <circle cx="100" cy="100" r="80" stroke="currentColor" stroke-width="2" fill="none"></circle>
                </svg>
            </div>
            <div class="relative px-6 py-18 sm:px-12 sm:py-26 lg:px-16">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
                        释放创意无限
                    </h1>
                    <p class="text-lg sm:text-xl mb-8 text-purple-100">
                        让想象力飞翔，用色彩描绘梦想
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <button class="bg-white bg-opacity-20 backdrop-blur-sm border border-white border-opacity-30 px-6 py-3 rounded-full hover:bg-opacity-30 transition-all">
                            创意工具
                        </button>
                        <button class="bg-yellow-400 text-purple-900 px-6 py-3 rounded-full font-semibold hover:bg-yellow-300 transition-colors">
                            开始创作
                        </button>
                    </div>
                </div>
            </div>
        </section>