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

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:

Author:
irahoza daniel

8 months ago

572
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.6k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

2 years ago

8.5k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

2 years ago

6.4k
Get in touch contact form fabform.io
Tailwind contact form that uses fabform.io to save form submissions

Author:
Ho O

1 year ago

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

Author:
Geoffrey Callaghan

2 years ago

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

7k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

2 years ago

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

6 months ago

655
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
basichtml
this is basic html

Author:
Anonymous

7 months ago

424
home
html , css

Author:
Hacker Development

8 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components