Home
Anonymous
Basic contact us section with google map

Basic contact us section with google map

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

Author Anonymous

12.3k

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

Author:
Santos78

2 years ago

16.5k
Feedback + Contact Us form

Author:
Rajesh kulkarni

2 years ago

12.4k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

11.8k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

2 years ago

8.3k
Get in touch contact form

Author:
Kris Showen

2 years ago

40.9k
Contact us form
Contact us form with contact details

Author:
Kris Showen

2 years ago

12.2k
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.2k
Contact us form template

Author:
Lukas Müller

2 years ago

9.1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

1 year ago

6.7k
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.

Author:
Muhammad Umair Arshad

3 months ago

391
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components