卡片悬浮联系 Tailwind网站组件

<section class="relative bg-gradient-to-br from-indigo-100 via-white to-cyan-100 rounded-2xl p-8 md:p-16 overflow-hidden">
            <div class="absolute top-10 left-10 w-32 h-32 bg-indigo-200 rounded-full opacity-50 animate-pulse"></div>
            <div class="absolute bottom-10 right-10 w-24 h-24 bg-cyan-200 rounded-full opacity-50 animate-pulse" style="animation-delay: 1s;"></div>
            <div class="relative z-10 max-w-6xl mx-auto">
                <div class="text-center mb-16">
                    <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                        与我们<span class="text-indigo-600">连接</span>
                    </h2>
                    <p class="text-gray-600 text-xl max-w-2xl mx-auto">
                        通过多种方式与我们取得联系，我们将为您提供最优质的服务
                    </p>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
                    <div class="group">
                        <div class="bg-white rounded-2xl p-8 shadow-lg transform hover:-translate-y-2 transition duration-300 hover:shadow-2xl">
                            <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-indigo-600 transition duration-300">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-3">电话联系</h3>
                            <p class="text-gray-600 mb-4">直接对话，即时解决</p>
                            <p class="text-indigo-600 font-semibold">+86 138 0013 8000</p>
                        </div>
                    </div>
                    <div class="group">
                        <div class="bg-white rounded-2xl p-8 shadow-lg transform hover:-translate-y-2 transition duration-300 hover:shadow-2xl">
                            <div class="w-16 h-16 bg-cyan-500 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-cyan-600 transition duration-300">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-3">邮件沟通</h3>
                            <p class="text-gray-600 mb-4">详细讨论，保留记录</p>
                            <p class="text-cyan-600 font-semibold">hello@floating.com</p>
                        </div>
                    </div>
                    <div class="group md:col-span-2 lg:col-span-1">
                        <div class="bg-white rounded-2xl p-8 shadow-lg transform hover:-translate-y-2 transition duration-300 hover:shadow-2xl">
                            <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6 group-hover:bg-purple-600 transition duration-300">
                                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-3">办公地址</h3>
                            <p class="text-gray-600 mb-4">欢迎实地参观</p>
                            <p class="text-purple-600 font-semibold">西安市雁塔区高新路</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-3xl shadow-2xl p-8 md:p-12 transform perspective-1000">
                    <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">快速联系表单</h3>
                    <form class="grid md:grid-cols-2 gap-8">
                        <div class="space-y-6">
                            <div class="group">
                                </div></div></form></div></div></section>