森林绿意横幅 Tailwind网站组件

<section class="relative bg-gradient-to-r from-green-700 to-emerald-600 text-white rounded-2xl">
            <div class="absolute inset-0 opacity-25">
                <svg class="absolute top-12 right-12 w-20 h-20 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>
                <svg class="absolute bottom-16 left-12 w-16 h-16 text-emerald-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-22 lg:px-16">
                <div class="max-w-4xl">
                    <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 max-w-2xl">
                        守护绿色家园，传承自然之美
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <button class="bg-white text-green-700 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-700 transition-colors">
                            了解行动
                        </button>
                    </div>
                </div>
            </div>
        </section>