社交媒体整合联系 Tailwind网站组件

<section class="bg-gray-50 py-16"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-gray-900 mb-4">多平台联系</h2> <p class="text-xl text-gray-600">选择您喜欢的沟通方式</p> </div> <div class="bg-white rounded-2xl shadow-xl p-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8"> <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white p-6 rounded-xl text-center transition duration-300 group"> <div class="text-3xl mb-2 group-hover:scale-110 transition-transform duration-300">📧</div> <div class="font-semibold">邮箱</div> </a> <a href="#" class="bg-green-500 hover:bg-green-600 text-white p-6 rounded-xl text-center transition duration-300 group"> <div class="text-3xl mb-2 group-hover:scale-110 transition-transform duration-300">📱</div> <div class="font-semibold">微信</div> </a> <a href="#" class="bg-red-500 hover:bg-red-600 text-white p-6 rounded-xl text-center transition duration-300 group"> <div class="text-3xl mb-2 group-hover:scale-110 transition-transform duration-300">📞</div> <div class="font-semibold">电话</div> </a> <a href="#" class="bg-purple-500 hover:bg-purple-600 text-white p-6 rounded-xl text-center transition duration-300 group"> <div class="text-3xl mb-2 group-hover:scale-110 transition-transform duration-300">💬</div> <div class="font-semibold">QQ</div> </a> </div> <div class="border-t border-gray-200 pt-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div> <h3 class="text-xl font-bold text-gray-900 mb-4">联系详情</h3> <div class="space-y-3"> <div class="flex items-center space-x-3"> <span class="text-blue-500">📧</span> <span class="text-gray-700">social@company.com</span> </div> <div class="flex items-center space-x-3"> <span class="text-green-500">📱</span> <span class="text-gray-700">WeChat: Company2024</span> </div> <div class="flex items-center space-x-3"> <span class="text-red-500">📞</span> <span class="text-gray-700">+86 021-12345678</span> </div> <div class="flex items-center space-x-3"> <span class="text-purple-500">💬</span> <span class="text-gray-700">QQ: 123456789</span> </div> </div> </div> <div> <h3 class="text-xl font-bold text-gray-900 mb-4">快速回复</h3> <div class="space-y-3"> <input type="text" placeholder="您的姓名" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <textarea placeholder="简短消息" rows="3" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">