透明悬浮导航 Tailwind网站组件

<section class="relative bg-blue-500 py-32">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-400 to-purple-600"></div>
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <nav class="backdrop-blur-md bg-white/20 rounded-2xl p-4 shadow-xl border border-white/30">
                    <div class="flex justify-between items-center">
                        <div class="text-white font-bold text-xl">GlassNav</div>
                        <div class="hidden md:flex space-x-6">
                            <a href="#" class="text-white/80 hover:text-white transition-colors">主页</a>
                            <a href="#" class="text-white/80 hover:text-white transition-colors">功能</a>
                            <a href="#" class="text-white/80 hover:text-white transition-colors">定价</a>
                            <a href="#" class="text-white/80 hover:text-white transition-colors">联系</a>
                        </div>
                        <button class="bg-white/20 backdrop-blur-sm text-white px-4 py-2 rounded-lg hover:bg-white/30 transition-colors">
                            登录
                        </button>
                    </div>
                </nav>
            </div>
        </section>