渐变背景联系 Tailwind网站组件

<section class="relative bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 rounded-2xl overflow-hidden"> <div class="absolute inset-0 bg-black bg-opacity-20"></div> <div class="relative z-10 px-8 py-16 md:px-16 md:py-20"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-12"> <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">保持联系</h2> <p class="text-blue-100 text-xl">让我们一起创造美好的未来</p> </div> <div class="grid lg:grid-cols-2 gap-12"> <div class="space-y-8"> <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 border border-white border-opacity-20"> <h3 class="text-white font-semibold text-xl mb-4">联系信息</h3> <div class="space-y-4 text-blue-100"> <p>📞 +86 138 0013 8000</p> <p>📧 hello@company.com</p> <p>📍 上海市浦东新区世纪大道1000号</p> </div> </div> <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 border border-white border-opacity-20"> <h3 class="text-white font-semibold text-xl mb-4">工作时间</h3> <div class="space-y-2 text-blue-100"> <p>周一至周五: 9:00 - 18:00</p> <p>周六至周日: 10:00 - 16:00</p> </div> </div> </div> <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-8 border border-white border-opacity-20"> <form class="space-y-6"> <div> <input type="text" placeholder="姓名" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-blue-200 focus:bg-opacity-30 focus:border-opacity-50"> </div> <div> <input type="email" placeholder="邮箱" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-blue-200 focus:bg-opacity-30 focus:border-opacity-50"> </div> <div> <input type="tel" placeholder="电话" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-blue-200 focus:bg-opacity-30 focus:border-opacity-50"> </div> <div> <textarea placeholder="消息内容" rows="4" class="w-full px-4 py-3 bg-white bg-opacity-20 border border-white border-opacity-30 rounded-lg text-white placeholder-blue-200 focus:bg-opacity-30 focus:border-opacity-50 resize-none">