Tailwind CSS Contact Form

A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI.
Browse more free UI components and templates at readymadeui.com.

This tailwind example is contributed by ReadyMadeUI, on 29-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Get in touch, Contact form

Form Contact us

Author ReadyMadeUI

Tailwind v3.4 559 4

Fork Fullscreen

<div class="bg-gray-50 max-w-screen-xl mx-auto">
      <div class="grid lg:grid-cols-3 justify-center items-center gap-y-12">
        <div class="lg:col-span-2 p-8 w-full max-w-2xl mx-auto">
          <div>
            <h2 class="text-3xl text-slate-900 font-bold">Contact us</h2>
            <p class="text-[15px] text-slate-600 leading-relaxed mt-4">Have questions or need assistance? We're here to help! Reach out to our team for support, inquiries, or collaboration opportunities.</p>
          </div>
          <form class="mt-8">
            <div class="grid sm:grid-cols-2 gap-4">
              <div>
                <label class='text-sm text-slate-900 font-medium mb-2 block'>Name</label>
                <input type='text' placeholder='Enter Name'
                  class="w-full py-3 px-4 text-slate-800 bg-white border border-gray-300 focus:border-slate-900 text-sm outline-0 rounded-md" />
              </div>
              <div>
                <label class='text-sm text-slate-900 font-medium mb-2 block'>Email</label>
                <input type='email' placeholder='Enter Email'
                  class="w-full py-3 px-4 text-slate-800 bg-white border border-gray-300 focus:border-slate-900 text-sm outline-0 rounded-md" />
              </div>
              <div>
                <label class='text-sm text-slate-900 font-medium mb-2 block'>Phone No.</label>
                <input type='number' placeholder='Enter Phone No.'
                  class="w-full py-3 px-4 text-slate-800 bg-white border border-gray-300 focus:border-slate-900 text-sm outline-0 rounded-md" />
              </div>
              <div>
                <label class='text-sm text-slate-900 font-medium mb-2 block'>Subject</label>
                <input type='text' placeholder='Enter Subject'
                  class="w-full py-3 px-4 text-slate-800 bg-white border border-gray-300 focus:border-slate-900 text-sm outline-0 rounded-md" />
              </div>
              <div class="col-span-full">
                <label class='text-sm text-slate-900 font-medium mb-2 block'>Message</label>
                <textarea placeholder='Enter Message' rows="6"
                  class="w-full px-4 text-slate-800 bg-white border border-gray-300 focus:border-slate-900 text-sm pt-3 outline-0 rounded-md"></textarea>
              </div>
            </div>
            <button type='button'
              class="text-white bg-slate-900 font-medium hover:bg-slate-800 tracking-wide text-sm px-4 py-3 w-full border-0 outline-0 rounded-md cursor-pointer mt-6">Send message</button>
          </form>
        </div>