Basic contact us section with google map

This tailwind example is contributed by Anonymous, on 01-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Author Anonymous

Tailwind v3.4 13.2k 7

Fork Fullscreen

<section class="bg-gray-100 py-12">
  <div class="container mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-800 mb-4">Contact Us</h2>

<div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-700 mb-2">Our Address</h3>
      <p class="text-gray-600">
        123 Main Street, Suite 456<br>
        Cityville, State 12345<br>
        Country
      </p>
    </div>

<div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-700 mb-2">Phone</h3>
      <p class="text-gray-600">+1 (123) 456-7890</p>
    </div>

<div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-700 mb-2">Email</h3>
      <p class="text-gray-600">info@example.com</p>
    </div>

<div class="relative h-0 overflow-hidden mb-6" style="padding-bottom: 56.25%;">
      <iframe
        class="absolute top-0 left-0 w-full h-full"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3353.096656292789!2d-122.08217698485344!3d37.42205787981786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbc7b4be10725%3A0xf59d178a87b32f52!2sGolden%20Gate%20Bridge!5e0!3m2!1sen!2sus!4v1610035984427!5m2!1sen!2sus"
        frameborder="0"
        style="border:0;"
        allowfullscreen=""
        aria-hidden="false"
        tabindex="0"
      ></iframe>
    </div>

</div>
</section>

Related Examples

Visit us section with google map
useful for landing pages

Santos78

3 years ago

17.5k
Feedback + Contact Us form

Rajesh kulkarni

3 years ago

13.4k
Contact us form with map
Contact us form with map

Chithira Kumar M

3 years ago

13.1k
Feedback Form
Feedback Form with a map

Andreas Wagner

3 years ago

9k
Get in touch contact form

Kris Showen

3 years ago

42.5k
Contact us form
Contact us form with contact details

Kris Showen

3 years ago

13.7k
tailwind contact form template
tailwind contact form template

Ti To

2 years ago

6.3k
Why Everyone Around the World Loves Us
"Our platform is built to serve everyone, everywhere — with speed, security, and a human touch." "From cities to remote villages, our features connect the world through technology that truly cares." "Designed with the whole world in mind — fast, secure, and made for real people." "No matter who you are or where you're from, our tools are built to empower and inspire you." "We believe great technology should be accessible, safe, and helpful to all — and that's exactly what we offer."

Nicole Shalom

1 year ago

1.8k
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Muhammad Umair Arshad

1 year ago

1.2k
beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

6.6k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

633
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

488