居中表单联系 Tailwind网站组件

<section class="bg-gradient-to-b from-blue-50 to-white rounded-2xl py-16 px-8"> <div class="max-w-2xl mx-auto text-center"> <div class="mb-12"> <div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> </svg> </div> <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4"> 让我们聊聊 </h2> <p class="text-gray-600 text-xl mb-2"> 有什么想法？我们很乐意倾听 </p> <p class="text-gray-500"> 通常在24小时内回复 </p> </div> <div class="bg-white rounded-2xl shadow-2xl p-8 md:p-10"> <form class="space-y-6"> <div class="text-left"> <input type="text" placeholder="您的姓名 *" class="w-full px-0 py-4 border-0 border-b-2 border-gray-200 focus:border-blue-600 focus:ring-0 focus:outline-none text-lg"> </div> <div class="text-left"> <input type="email" placeholder="邮箱地址 *" class="w-full px-0 py-4 border-0 border-b-2 border-gray-200 focus:border-blue-600 focus:ring-0 focus:outline-none text-lg"> </div> <div class="text-left"> <input type="tel" placeholder="联系电话" class="w-full px-0 py-4 border-0 border-b-2 border-gray-200 focus:border-blue-600 focus:ring-0 focus:outline-none text-lg"> </div> <div class="text-left"> <textarea placeholder="告诉我们您的想法... *" rows="4" class="w-full px-0 py-4 border-0 border-b-2 border-gray-200 focus:border-blue-600 focus:ring-0 focus:outline-none text-lg resize-none">

或者通过以下方式联系我们

📞 138-0013-8000 📧 hello@company.com