Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS

Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

This tailwind example is contributed by Abdul Baset Bappy, on 26-Mar-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us Other

Author Abdul Baset Bappy

Tailwind v3.4 1.9k 5

Fork Fullscreen

<section class="bg-primary min-h-screen py-10 h-full flex items-center text-white px-4 md:px-10 lg:px-20">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
    
    <div>
      <h2 class="text-3xl md:text-4xl font-bold leading-tight">
        Have You Any Project? <br />
        <span class="text-gray-300">Please Drop a Message</span>
      </h2>
      <p class="mt-4 text-gray-400">
        Get in touch and let me know how I can help. Fill out the form and
        I'll be in touch as soon as possible.
      </p>

<div class="mt-6 space-y-4">
        <div class="flex items-start space-x-4">
          <span class="text-xl text-gray-400">📍</span>
          <div>
            <p class="font-semibold">Address:</p>
            <p class="text-gray-400">89/9 Mothijheel, Dhaka, Bangladesh.</p>
          </div>
        </div>

<div class="flex items-start space-x-4">
          <span class="text-xl text-gray-400">📞</span>
          <div>
            <p class="font-semibold">Phone:</p>
            <p class="text-gray-400">+8801799568976</p>
            <p class="text-gray-400">+8801904015294</p>
          </div>
        </div>

<div class="flex items-start space-x-4">
          <span class="text-xl text-gray-400">✉️</span>
          <div>
            <p class="font-semibold">Email:</p>
            <p class="text-gray-400">support@abdul.com</p>
            <p class="text-gray-400">abdulbasetbappy@hotmail.com</p>
          </div>
        </div>
      </div>

<div class="mt-6 flex justify-center lg:justify-start gap-4">
        <a href="#"
          class="group relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-neutral-950 text-neutral-200 hover:w-32 transition-all overflow-hidden">
          <span class="hidden group-hover:inline whitespace-nowrap mr-2">GitHub</span>🐙
        </a>
        <a href="#"
          class="group relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-900 text-neutral-200 hover:w-36 transition-all overflow-hidden">
          <span class="hidden group-hover:inline whitespace-nowrap mr-2">LinkedIn</span>💼
        </a>
        <a href="#"
          class="group relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-blue-700 text-neutral-200 hover:w-36 transition-all overflow-hidden">
          <span class="hidden group-hover:inline whitespace-nowrap mr-2">Facebook</span>📘
        </a>
        <a href="#"
          class="group relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-red-800 text-neutral-200 hover:w-36 transition-all overflow-hidden">
          <span class="hidden group-hover:inline whitespace-nowrap mr-2">YouTube</span>▶️
        </a>
      </div>
    </div>

<div class="bg-gray-800 p-8 rounded-xl shadow-lg">
      <form>
        <div class="mb-4">
          <label class="block text-gray-400 mb-2">Name</label>
          <input type="text" placeholder="e.g John Doe" class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg border border-gray-600 outline-none" />
        </div>

<div class="mb-4">
          <label class="block text-gray-400 mb-2">Email<span class="text-xs">(Required)</span></label>
          <input type="email" placeholder="e.g johndoe@mail.com" class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg border border-gray-600 outline-none" />
        </div>

<div class="mb-4">
          <label class="block text-gray-400 mb-2">Phone</label>
          <input type="tel" placeholder="Phone Number" class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg border border-gray-600 outline-none" />
        </div>

<div class="mb-4">
          <label class="block text-gray-400 mb-2">Message<span class="text-xs">(Required)</span></label>
          <textarea placeholder="Write message..." class="w-full px-4 py-3 bg-gray-700 text-white rounded-lg border border-gray-600 outline-none h-24"></textarea>
        </div>