梦幻紫色横幅 Tailwind网站组件

<section class="relative bg-gradient-to-br from-purple-600 to-indigo-800 text-white rounded-2xl overflow-hidden">
            <div class="absolute inset-0">
                <div class="absolute top-20 left-20 w-32 h-32 bg-purple-400 rounded-full opacity-20 blur-xl"></div>
                <div class="absolute bottom-20 right-20 w-24 h-24 bg-pink-400 rounded-full opacity-15 blur-lg"></div>
                <div class="absolute top-1/2 left-1/2 w-16 h-16 bg-blue-400 rounded-full opacity-10 blur-md transform -translate-x-1/2 -translate-y-1/2"></div>
            </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-200">
                        在想象的国度里，一切皆有可能
                    </p>
                    <div class="flex justify-center">
                        <button class="bg-gradient-to-r from-pink-500 to-purple-500 px-8 py-4 rounded-full font-semibold hover:from-pink-600 hover:to-purple-600 transition-all transform hover:scale-105 shadow-xl">
                            进入梦境
                        </button>
                    </div>
                </div>
            </div>
        </section>