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 Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Homayoun

1 year ago

1.5k
contact form
contact form

Geoffrey Callaghan

2 years ago

7.9k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k
Contact us page template
full page fancy contact us page

Geoffrey Callaghan

2 years ago

8.3k
tailwind contact form
Nice looking tailwind contact form

Geoffrey Callaghan

2 years ago

3.3k
Simple contact us form

Lukas Müller

3 years ago

12.7k
basichtml
this is basic html

Anonymous

1 year ago

925
Contact Form
with hidden email

Geoffrey Callaghan

2 years ago

7.2k
Contact us section
Minimal contact us form

Geoffrey Callaghan

2 years ago

6.1k
Contact us form
suitable for collecting user input for various purposes such as feature requests, suggestions, or feedback.

Mereani Waqa

2 years ago

6.1k
Responsive contact us section

Ron Hicks

3 years ago

15.9k
Contact us form template with fabform

Ho O

1 year ago

1.8k