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.4k
Feedback + Contact Us form

Rajesh kulkarni

3 years ago

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

Chithira Kumar M

2 years ago

13k
Feedback Form
Feedback Form with a map

Andreas Wagner

2 years ago

9k
Get in touch contact form

Kris Showen

3 years ago

42.3k
Contact us form
Contact us form with contact details

Kris Showen

3 years ago

13.6k
Call Display UI built with Tailwind CSS
Here's a Call Display UI built with Tailwind CSS that mimics an incoming/ongoing call screen with a modern design:

irahoza daniel

1 year ago

957
Get in touch tailwind contact form
Get in touch tailwind contact form

Geoffrey Callaghan

2 years ago

2.7k
Contact Us

ariaw

11 months ago

939
Responsive Login & Support Form
A responsive login page for an order and production management system. It features a branded navigation bar, username and password fields, a clear sign-in action, and a built-in support message form with attachment and emoji controls. Built with Tailwind CSS and Flowbite, the layout adapts smoothly to desktop and mobile screens. Tags: Login Form, Authentication, Contact Form, Support Form, Responsive, Navbar, Footer, Tailwind CSS, Flowbite, Admin Panel

Alla Telegina

3 weeks ago

124
Contact Form with fabform.io
Contact form

Ho O

1 year ago

1.9k
Get in touch contact form with fabform.io

Ho O

1 year ago

2.2k