分割导航栏 Tailwind网站组件

<section class="relative bg-orange-500">
            <div class="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-500"></div>
            <div class="absolute bottom-0 left-0 right-0 h-8 bg-white" style="clip-path: polygon(0 100%, 100% 0, 100% 100%)"></div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <div class="flex flex-col md:flex-row justify-between items-center text-white">
                    <div class="mb-8 md:mb-0">
                        <h1 class="text-4xl md:text-5xl font-bold mb-2">创意设计</h1>
                        <p class="text-lg opacity-90">让想象力成为现实</p>
                    </div>
                    <nav class="flex flex-wrap gap-6">
                        <a href="#" class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full hover:bg-white/30 transition-colors">作品</a>
                        <a href="#" class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full hover:bg-white/30 transition-colors">服务</a>
                        <a href="#" class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full hover:bg-white/30 transition-colors">团队</a>
                        <a href="#" class="bg-white text-orange-500 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition-colors">联系我们</a>
                    </nav>
                </div>
            </div>
        </section>