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

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

3 years ago

16.7k
Feedback + Contact Us form

Author:
Rajesh kulkarni

3 years ago

12.7k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12.3k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

2 years ago

8.6k
Get in touch contact form

Author:
Kris Showen

2 years ago

41.3k
Contact us form
Contact us form with contact details

Author:
Kris Showen

2 years ago

12.6k
Contact information section
Display Location, email, address, and phone number

Author:
Livia Flores

2 years ago

13k
Contact Form
with hidden email

Author:
Geoffrey Callaghan

2 years ago

6.4k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

7 months ago

1.1k
Contact page

Author:
Mahir

2 years ago

17.6k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6.2k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components