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

Author:
Rajesh kulkarni

3 years ago

12.8k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12.4k
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.4k
Contact us form
Contact us form with contact details

Author:
Kris Showen

2 years ago

12.6k
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

2 years ago

7.1k
Contact Spinner
Contact button spinning

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.6k
Responsive contact us section
responsive contact section

Author:
Geoffrey Callaghan

2 years ago

7.1k
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.4k
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

3k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

8 months ago

860

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components