Home
AKASH GANDHAR
Contact Us

Contact Us

Fully Responsive Contact Us page with google maps embeded

This tailwind example is contributed by AKASH GANDHAR, on 06-Jul-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author AKASH GANDHAR

2.3k

Fork Fullscreen

<div class="flex flex-wrap justify-center items-center h-auto p-5 pl-[6%] pt-[9%]">
        <div class="w-full md:w-2/5 p-4">
          <h2 class="text-xl md:text-7xl font-semibold mb-5">GET IN TOUCH!</h2>
          <form class="space-y-4">
            <div>
              <input type="text" id="fullName" name="fullName" placeholder='Full Name' class="mt-1 p-4 w-full border rounded-md" />
            </div>
            <div>
              <input type="email" id="email" name="email" placeholder='Email' class="mt-1 p-4 w-full border rounded-md" />
            </div>
            <div>
              <textarea id="message" name="message" placeholder='Message' class="mt-1 p-4 w-full border rounded-md" rows="4"></textarea>
            </div>
            <button type="submit" class="px-8 py-4 bg-black text-white hover:bg-blue-700">Submit</button>
          </form>
        </div>
        <div class="w-full md:w-1/2 p-4 flex justify-center">
          <div class="rounded-full overflow-hidden w-[35rem] h-[35rem]">
            <iframe
              class="w-[35rem] h-[35rem]"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d243647.3160407063!2d-74.25986568785095!3d40.697670063849574!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDDCsDQxJzUxLjYiTiA3NMKwMTUnMzUuNyJX!5e0!3m2!1sen!2sus!4v1652901957916"
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </div>

Related Examples

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

1 year ago

1.4k
Contact form Modern
Contact Us We'd love to hear from you!

Author:
Alif Bima Pradana

1 week ago

89
Responsive contact us section

Author:
Ron Hicks

3 years ago

15k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.8k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
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."

Author:
Nicole Shalom

8 months ago

1.2k
Contact us form template

Author:
Lukas Müller

3 years ago

9.3k
Contact Us

Author:
ariaw

4 months ago

226
Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

Author:
ReadyMadeUI

2 months ago

138
Contact Information section with form
A section that displays ways to connect, featuring icons for social media and clickable email addresses.

Author:
Junclarkaizen Pagu

2 years ago

8.1k
Contact us page

Author:
Freja Jensen

3 years ago

12.1k
basichtml
this is basic html

Author:
Anonymous

7 months ago

428

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components