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

181

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

1 year ago

7.1k
Contact us form
Contact us form with contact details

Author:
Kris Showen

1 year ago

11.3k
Inquiry / Contact form

Author:
isolde

1 year ago

6.7k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Author:
Geoffrey Callaghan

1 year ago

5.5k
tailwind contact form template
tailwind contact form template

Author:
Ti To

1 year ago

4.6k
Get in touch contact form fabform.io
Tailwind contact form that uses fabform.io to save form submissions

Author:
Ho O

3 months ago

519
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

4.9k
Contact us form template with fabform

Author:
Ho O

3 months ago

547
Contact Us form

Author:
ABDO-SY

3 weeks ago

182
Get in touch tailwind contact form
Get in touch tailwind contact form

Author:
Geoffrey Callaghan

9 months ago

1.4k
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!

Author:
Abdul Baset Bappy

4 weeks ago

193
Contact me form

Author:
Arya

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components