Home
Vikas Kushwah
Responsive Contact Information and Inquiry Form Component

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

This tailwind example is contributed by Vikas Kushwah, on 24-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form

Author Vikas Kushwah

1.4k

Fork Fullscreen

<section class="lg:flex lg:gap-5 py-10 lg:px-20 md:px-10 px-5 text-blue-950">
        <div class="lg:w-1/2 lg:pb-0 pb-10">
          <h2 class="text-[38px] font-bold mb-5">
            Contact <span class="text-[#0074F2] ">Info</span>
          </h2>
          <p class='pb-5 lg:pr-20'>&quot;
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non nostrum, fugiat accusantium reiciendis magnam dolorem
            
            &quot;</p>
          <div class="space-y-4">
          
            <div>
              <h4 class="text-lg font-normal">Corporate Office:</h4>

<address class="flex items-start gap-1 pt-3">
                <IoLocationOutline className='text-blue-500 text-2xl' />
                : Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non nostrum, fugiat accusantium reiciendis magnam dolorem
            
            &quot;
              </address>
            </div>
            <div>
              <h4 class="text-lg font-medium">Email</h4>
              <p class="flex items-center gap-2  hover:underline">
                <MdOutlineEmail class='text-blue-500' />: example@gmail.com
              </p>
            </div>
            <div>
              <h4 class="text-lg font-medium ">Contact</h4>
              <p class="flex items-center gap-2"><FaPhoneAlt className='text-blue-500' />: +91 404******</p>
            </div>
          </div>
        </div>
        <div class='lg:w-1/2 flex flex-col text-blue-950 py-6 rounded-xl pt-16 lg:px-10  md:px-16 px-5 bg-slate-50 lg:pt-7'>
            <h2 class="text-xl font-light text-blue-600 mb-6">
                Have Questions? Contact Our Highway Consultancy Team
            </h2>
            <form class="space-y-2 w-full" onSubmit={handleSubmit}>
                <div>
                    <label
                        htmlFor="username"
                        class="block text-gray-600 font-semibold mb-1">
                        Name <span class='text-red-500'>*</span>
                    </label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        placeholder="Enter your name"       
                        required
                        class="w-full border-gray-300 rounded-xl px-4 py-1.5 text-gray-800 shadow-sm focus:outline-none"
                    />
                </div>
                <div>
                    <label
                        htmlFor="mobile"
                        class="block text-gray-600 font-semibold mb-1">
                        Mobile Number <span class='text-red-500'>*</span>
                    </label>

<input
                        type="tel"
                        id="tel"
                        name="tel"
                        placeholder="phone"
                        required
                        class="w-full border-gray-300 rounded-xl px-4 py-1.5 text-gray-800 shadow-sm focus:outline-none"
                    />
                </div>
                <div>
                    <label
                        htmlFor="email"
                        className="block text-gray-600 font-semibold mb-1">
                        Email ID <span class='text-red-500'>*</span>
                    </label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="you@example.com"
                        required
                        class="w-full border-gray-300 rounded-xl px-4 py-1.5 text-gray-800 shadow-sm focus:outline-none"
                    />
                </div>
                <div>
                    <label
                        htmlFor="subjects"
                        class="block text-gray-600 font-semibold mb-1">
                        Message
                    </label>
                     <input
                        type="text"
                        id="Message"
                        name="Message"
                        placeholder="Message"       
                        required
                        class="w-full border-gray-300 rounded-xl px-4 py-1.5 text-gray-800 shadow-sm focus:outline-none"
                    />
                   
                </div>
                <div class='flex justify-center'>
                    <button
                        type="submit"
                        class="py-1 px-5 rounded-xl hover:text-blue-400 hover:border-blue-400 border-2  hover:bg-gray-50 cursor-pointer bg-blue-400 text-gray-50"
                    >
                        Submit
                    </button>
                </div>
            </form>
        </div>
      </section>

Related Examples

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

Author:
Junclarkaizen Pagu

2 years ago

8.1k
Get in touch contact form with fabform.io

Author:
Ho O

1 year ago

1.5k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

3 years ago

12.3k
Contact Spinner
Contact button spinning

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.6k
Contact us form template

Author:
Geoffrey Callaghan

2 years ago

7k
Contact us page template
full page fancy contact us page

Author:
Lukas Müller

3 years ago

17.4k
Contact information section
Display Location, email, address, and phone number

Author:
Livia Flores

3 years ago

13k
Contact Form

Author:
Sophia Baker

3 years ago

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

Author:
Walid Ahmad

1 year ago

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

2 years ago

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

7 months ago

673
Contact Us form

Author:
ABDO-SY

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components