城市夜景横幅 Tailwind网站组件

<section class="relative bg-gray-900 text-white rounded-lg overflow-hidden">
            <div class="absolute inset-0">
                <div class="absolute top-0 left-1/4 w-1 h-16 bg-cyan-400 opacity-60"></div>
                <div class="absolute top-0 right-1/3 w-1 h-20 bg-pink-400 opacity-60"></div>
                <div class="absolute top-0 left-1/2 w-1 h-12 bg-yellow-400 opacity-60"></div>
                <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 via-pink-400 to-yellow-400 opacity-40"></div>
            </div>
            <div class="relative px-6 py-20 sm:px-12 sm:py-28 lg:px-16">
                <div class="max-w-4xl">
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
                        都市<span class="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-pink-400">霓虹</span>
                    </h1>
                    <p class="text-lg sm:text-xl mb-8 text-gray-300 max-w-2xl">
                        在不夜城中追寻梦想，在霓虹灯下书写传奇
                    </p>
                    <button class="bg-gradient-to-r from-cyan-500 to-pink-500 px-10 py-4 rounded-full font-semibold hover:from-cyan-600 hover:to-pink-600 transition-all">
                        探索都市
                    </button>
                </div>
            </div>
        </section>