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

816

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