Contact section - Htmlwind

Simple grid contact section

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Author Htmlwind

Tailwind v3.4 1.4k 5

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Get in touch</h2>
      <p class="mt-6 text-lg leading-8 text-gray-600">Have any questions or need assistance? Feel free to reach out to us. We're here to connect with you and ensure all your queries are addressed.</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4">
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
            <path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Contact sales</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">Talk to our helpful team.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">sales@example.com</a>
        </div>
      </div>
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Contact support</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">We're ready to assist you.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">support@example.com</a>
        </div>
      </div>
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Visit us</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">Come see us at our HQ.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">Get directions</a>
        </div>
      </div>
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Call us</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">Weekdays, 8am – 5pm.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">+1 (555) 123-4567</a>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

KULDEEP

1 year ago

1.6k
Feedback + Contact Us form

Rajesh kulkarni

3 years ago

13.4k
Visernic Profile

MD Mostafa Niloy

1 year ago

1.3k
Glassmorphism form

Geoffrey Callaghan

3 years ago

7.5k
Contact Information section with form
A section that displays ways to connect, featuring icons for social media and clickable email addresses.

Geoffrey Callaghan

3 years ago

6.2k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Muhammad Umair Arshad

1 year ago

1.6k
Contact us Form with Responsive

KULDEEP

1 year ago

1.2k
Contact us form with map
Contact us form with map

Chithira Kumar M

3 years ago

13.1k
Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Juraj

9 months ago

523
tailwind contact form template
tailwind contact form template

Ti To

2 years ago

6.3k
basichtml
this is basic html

Anonymous

1 year ago

927
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k