清新自然风格横幅 Tailwind网站组件

<section class="relative bg-gradient-to-r from-green-400 to-emerald-500 text-white rounded-3xl overflow-hidden">
            <div class="absolute inset-0 opacity-30">
                <svg class="absolute top-5 right-10 w-16 h-16 text-green-200" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd"></path>
                </svg>
                <svg class="absolute bottom-10 left-8 w-12 h-12 text-green-300" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd"></path>
                </svg>
            </div>
            <div class="relative px-6 py-16 sm:px-12 sm:py-24 lg:px-16">
                <div class="max-w-3xl">
                    <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-green-100">
                        让我们一起保护地球，创造可持续的美好未来
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="bg-white text-green-600 px-8 py-3 rounded-full font-semibold hover:bg-green-50 transition-colors">
                            了解更多
                        </button>
                        <button class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-green-600 transition-colors">
                            加入我们
                        </button>
                    </div>
                </div>
            </div>
        </section>