Home
KULDEEP
Contact Us / Enquiry-form Responsive

Contact Us / Enquiry-form Responsive

This tailwind example is contributed by KULDEEP, on 29-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form,Register, Sign in,Typography, Title, h1, h2, h3

Form Contact us Login Form Heading Other

Author KULDEEP

980

Fork Fullscreen

<section class="relative max-w-7xl mx-auto px-4 py-16">
  
  <div class="text-center mb-12">
    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
      Enquire About Our <span class="text-red-600">Courses</span>
    </h1>
    <div class="w-20 h-1 bg-red-600 mx-auto mb-6"></div>
    <p class="text-xl text-gray-600 max-w-3xl mx-auto">
      We're here to help you begin your creative journey. Fill out the form below and our team will get back to you shortly.
    </p>
  </div>

<div class="bg-white rounded-xl shadow-2xl overflow-hidden">
    <div class="md:flex">
      
      <div class="md:w-1/3 bg-gradient-to-br from-red-600 to-red-800 p-10 text-white flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-4">Why Enquire With Us?</h2>
          <ul class="space-y-4">
            <li class="flex items-start">
              <svg class="h-6 w-6 text-red-200 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
              <span>Expert guidance from industry professionals</span>
            </li>
            <li class="flex items-start">
              <svg class="h-6 w-6 text-red-200 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
              <span>Personalized course recommendations</span>
            </li>
            <li class="flex items-start">
              <svg class="h-6 w-6 text-red-200 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
              <span>Flexible learning options</span>
            </li>
            <li class="flex items-start">
              <svg class="h-6 w-6 text-red-200 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
              <span>Quick response to all enquiries</span>
            </li>
          </ul>
        </div>
        <div class="mt-8">
          <h3 class="text-lg font-semibold mb-2">Need immediate assistance?</h3>
          <p class="text-red-100 mb-2">Call us at +91 7307xxxxxx</p>
          <p class="text-sm text-red-200">Our team is available 10AM - 6PM, Monday to Saturday</p>
        </div>
      </div>

<div class="md:w-2/3 p-10">
        <form class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
              <input type="text" name="fullName" placeholder="John Doe" class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500" required />
            </div>

<div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
              <input type="email" name="email" placeholder="john@example.com" class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500" required />
            </div>

<div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Mobile Number</label>
              <input type="tel" name="mobileNumber" placeholder="+91 9876543210" class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500" required />
            </div>

<div>
              <label class="block text-sm font-medium text-gray-700 mb-1">Course Interested In</label>
              <select name="courses" class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500 bg-white" required>
                <option value="">Select a Course</option>
                <option value="Graphic Design">Graphic Design</option>
                <option value="Web Development">Web Development</option>
                <option value="Animation">Animation</option>
                <option value="UI/UX Design">UI/UX Design</option>
              </select>
            </div>
          </div>

<div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Your Message</label>
            <textarea name="message" rows="4" placeholder="Tell us about your interests and goals..." class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-red-500 focus:border-red-500" required></textarea>
          </div>

<div>
            <button type="submit" class="w-full py-3 px-6 bg-red-600 text-white font-medium rounded-lg shadow-sm hover:bg-red-700 transition duration-300">
              Submit Enquiry
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

Related Examples

Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

8 months ago

1.6k
hello world
by salvator

Author:
Anonymous

5 months ago

389
Login form

Author:
Aman kumar

1 year ago

4.1k
Beautiful page login
form with continue with google and continue with github buttons

Author:
Wagner

9 months ago

1.4k
contact-form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.4k
Login/Register Form with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Contact Us form

Author:
ABDO-SY

6 months ago

935
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11.2k
Responsive Contact Information and Inquiry Form Component
This component is a fully responsive and reusable section designed for websites that need to display contact information alongside a user inquiry form. It is built with Tailwind CSS for easy customization and integration into any projec

Author:
Vikas Kushwah

6 months ago

821
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.8k
Show credit card details

Author:
Manuela Bianka

2 years ago

12.1k
Image embed in a text
This example combines text and images to create visually appealing content.

Author:
Zephyr

2 years ago

13.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components