磨砂玻璃卡片 Tailwind网站组件

<section class="bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 py-20">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="backdrop-blur-xl bg-white/10 rounded-3xl p-8 shadow-2xl border border-white/20">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="text-white mb-6 md:mb-0">
                            <h1 class="text-4xl md:text-5xl font-bold mb-4">毛玻璃美学</h1>
                            <p class="text-lg opacity-90">透明与模糊的完美平衡</p>
                        </div>
                        <div class="flex flex-wrap gap-4">
                            <button class="backdrop-blur-sm bg-white/20 text-white px-6 py-3 rounded-2xl hover:bg-white/30 transition-colors border border-white/30">
                                透明度
                            </button>
                            <button class="backdrop-blur-sm bg-white/20 text-white px-6 py-3 rounded-2xl hover:bg-white/30 transition-colors border border-white/30">
                                模糊效果
                            </button>
                            <button class="bg-white text-purple-600 px-6 py-3 rounded-2xl font-semibold hover:bg-gray-100 transition-colors">
                                立即体验
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>