圆形头像联系 Tailwind网站组件

<section class="bg-white rounded-2xl p-8 md:p-12 shadow-lg"> <div class="max-w-4xl mx-auto"> <div class="text-center mb-12"> <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">认识我们的团队</h2> <p class="text-gray-600 text-lg">专业的团队随时为您服务</p> </div> <div class="grid md:grid-cols-3 gap-8 mb-12"> <div class="text-center"> <div class="w-24 h-24 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-4 flex items-center justify-center"> <span class="text-white text-2xl font-bold">张</span> </div> <h3 class="font-semibold text-gray-900 mb-1">张经理</h3> <p class="text-gray-600 text-sm mb-3">销售总监</p> <div class="space-y-1 text-sm"> <p class="text-blue-600">📞 138-0013-8001</p> <p class="text-blue-600">✉️ zhang@company.com</p> </div> </div> <div class="text-center"> <div class="w-24 h-24 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-4 flex items-center justify-center"> <span class="text-white text-2xl font-bold">李</span> </div> <h3 class="font-semibold text-gray-900 mb-1">李工程师</h3> <p class="text-gray-600 text-sm mb-3">技术支持</p> <div class="space-y-1 text-sm"> <p class="text-green-600">📞 138-0013-8002</p> <p class="text-green-600">✉️ li@company.com</p> </div> </div> <div class="text-center"> <div class="w-24 h-24 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-4 flex items-center justify-center"> <span class="text-white text-2xl font-bold">王</span> </div> <h3 class="font-semibold text-gray-900 mb-1">王助理</h3> <p class="text-gray-600 text-sm mb-3">客户服务</p> <div class="space-y-1 text-sm"> <p class="text-purple-600">📞 138-0013-8003</p> <p class="text-purple-600">✉️ wang@company.com</p> </div> </div> </div> <div class="bg-gray-50 rounded-xl p-8"> <h3 class="text-xl font-bold text-gray-900 mb-6 text-center">或者给我们留言</h3> <form class="space-y-4"> <div class="grid md:grid-cols-2 gap-4"> <input type="text" placeholder="您的姓名" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <input type="email" placeholder="邮箱地址" class="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> </div> <div> <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> <option>选择联系人</option> <option>张经理 - 销售咨询</option> <option>李工程师 - 技术支持</option> <option>王助理 - 客户服务</option> </select> </div> <textarea placeholder="请描述您的需求..." rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none">