Home
varniraj vaghela
Contact Us

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 CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author varniraj vaghela

2.2k

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
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

1 year ago

6.3k
Contact us form template with fabform

Author:
Ho O

9 months ago

949
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

6k
Feedback + Contact Us form

Author:
Rajesh kulkarni

2 years ago

12.4k
contact form
contact form

Author:
Geoffrey Callaghan

1 year ago

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

5 months ago

901
Responsive contact us section

Author:
Ron Hicks

2 years ago

14.6k
Contact me form
contact me form

Author:
Geoffrey Callaghan

2 years ago

7.2k
Contact us form
Contact us form with contact details

Author:
Kris Showen

2 years ago

12.2k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

2 years ago

8.3k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

Author:
ABDO-SY

8 months ago

1.5k
Feedback + Contact Us form
with protected email address

Author:
Geoffrey Callaghan

2 years ago

8.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components