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

1.8k

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

Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.8k
Contact us form
suitable for collecting user input for various purposes such as feature requests, suggestions, or feedback.

Author:
Mereani Waqa

1 year ago

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

2 months ago

172
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

5 months ago

975
Simple contact us form

Author:
Geoffrey Callaghan

1 year ago

6.6k
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

6.2k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Author:
Abhiraj

6 months ago

1.8k
Feedback + Contact Us form
with protected email address

Author:
Geoffrey Callaghan

1 year ago

8.1k
Contact Form
with hidden email

Author:
Geoffrey Callaghan

1 year ago

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

2 weeks ago

45
basichtml
this is basic html

Author:
Anonymous

1 month ago

102
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

5 months ago

906

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components