Contact Us

This is contact us page with form

This tailwind example is contributed by varniraj vaghela, on 21-May-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Author varniraj vaghela

Tailwind v3.4 3.2k 6

Fork Fullscreen

<div class="bg-white">
      <header class="bg-green-700 text-white text-center py-12">
        <h1 class="text-4xl font-bold mt-16">Contact Us</h1>
      </header>
      <section class="text-center py-12 px-4">
        <h2 class="text-2xl font-bold">Get In Touch</h2>
        <p class="mt-4 text-gray-700 max-w-2xl mx-auto">We are here to help you. Reach out to us via any of the following methods.</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-8 animate-fadeIn">
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Call Us</h3>
            <p class="text-gray-700 mt-2">+1 123 456 7890</p>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Email Us</h3>
            <p class="text-gray-700 mt-2">contact@wisedoctors.com</p>
          </div>
          <div class="p-4 shadow-lg rounded-lg bg-green-100 hover:bg-green-200 transition-colors">
            <h3 class="text-xl font-bold">Visit Us</h3>
            <p class="text-gray-700 mt-2">123 Health St, Wellness City</p>
          </div>
        </div>
      </section>
      <section class="bg-gray-100 py-12 px-4">
        <h2 class="text-2xl font-bold text-center">Send Us A Message</h2>
        <form class="max-w-2xl mx-auto mt-8 space-y-8">
          <div>
            <label htmlFor="name" class="block text-gray-700 font-bold">Name</label>
            <input type="text" id="name" class="w-full mt-2 p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 transition" />
          </div>
          <div>
            <label htmlFor="email" class="block text-gray-700 font-bold">Email</label>
            <input type="email" id="email" class="w-full mt-2 p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 transition" />
          </div>
          <div>
            <label htmlFor="message" class="block text-gray-700 font-bold">Message</label>
            <textarea id="message" rows="5" class="w-full mt-2 p-3 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 transition"></textarea>
          </div>
          <button type="submit" class="w-full bg-green-700 text-white py-3 rounded-lg shadow-lg hover:bg-green-600 transition-colors">Send Message</button>
        </form>
      </section>
      <section class="text-center py-12 px-4">
        <h2 class="text-2xl font-bold">Frequently Asked Questions</h2>
        <div class="mt-8">
          <div class="p-4 border rounded-lg shadow-md transition transform hover:scale-100 scale-90">
            <h3 class="text-xl font-bold">What are your operating hours?</h3>
            <p class="mt-2 text-gray-700">We operate from 9 AM to 5 PM, Monday to Friday.</p>
          </div>
          <div class="p-4 border rounded-lg shadow-md transition transform hover:scale-100 scale-90 mt-4">
            <h3 class="text-xl font-bold">How can I book an appointment?</h3>
            <p class="mt-2 text-gray-700">You can book an appointment through our website or by calling our office.</p>
          </div>
          <div class="p-4 border rounded-lg shadow-md transition transform hover:scale-100 scale-90  mt-4">
            <h3 class="text-xl font-bold">Do you offer telemedicine services?</h3>
            <p class="mt-2 text-gray-700">Yes, we offer telemedicine consultations.</p>
          </div>
        </div>
      </section>
      <footer class="bg-green-700 text-white text-center py-8">
        <p>&copy; Copyright Your Company Name 2024 . All rights reserved. Made By Binary Boats⛵.</p>
      </footer>
    </div>

Related Examples

Contact us Form
suitable for dark-themed websites

Anja Müller

3 years ago

10.6k
Glassmorphism form

Geoffrey Callaghan

3 years ago

7.5k
Contact Form with fabform.io
Contact form

Ho O

1 year ago

2k
Inquiry / Contact form

isolde

2 years ago

8.2k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

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

Rathanak Phan

1 year ago

1.8k
Visit us section with google map
useful for landing pages

Santos78

3 years ago

17.5k
Feedback + Contact Us form

Rajesh kulkarni

3 years ago

13.4k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

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

Junclarkaizen Pagu

3 years ago

8.6k
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:

irahoza daniel

1 year ago

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

Walid Ahmad

2 years ago

4.3k