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

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

Contact Form with fabform.io
Contact form

Author:
Ho O

10 months ago

1k
Contact Us
This is contact us page with form

Author:
varniraj vaghela

1 year ago

2.2k
damatebis forma

Author:
Tamaz gogitidze

1 year ago

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

9 months ago

1.3k
Visernic Profile

Author:
MD Mostafa Niloy

3 weeks ago

153
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

7.9k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.9k
Get in touch contact form

Author:
Kris Showen

2 years ago

41k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.5k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

4 months ago

1k
Responsive contact us section

Author:
Ron Hicks

2 years ago

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

6 months ago

417

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components