Home
ABDO-SY
Contact Us form

Contact Us form

This tailwind example is contributed by ABDO-SY, on 30-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Get in touch, Contact form

Form Contact us

Author ABDO-SY

799

Fork Fullscreen

<section class="dark:bg-gray-800 bg-[#F9F9F9]">
  <div class="max-w-[556px] px-4 py-10 mx-auto  flex flex-col ">
    <div class="w-full flex flex-col gap-5">
      <div class="flex gap-9">
        <label class="flex items-center gap-4"><input type="radio" class="w-7 h-7  accent-[#b9ff66]"><span class="justify-start dark:text-white text-black text-base sm:text-lg font-normal ">Say Hi</span></label><label class="flex items-center gap-4"><input type="radio" class="w-7 h-7  accent-[#b9ff66]"><span class="justify-start dark:text-white text-black text-base sm:text-lg font-normal ">Get a Quote</span></label>
      </div>
      <div class="w-full flex flex-col justify-start items-start gap-6">
        <div class="w-full">
          <label class=" dark:text-white text-black text-base font-normal  leading-7">Name*</label><input placeholder="Name" type="text" class="mt-2 w-full px-5 py-2 bg-white rounded-xl outline outline-1 outline-offset-[-1px] outline-black  overflow-hidden  text-[#898989] text-lg font-normal ">
        </div>
        <div class="w-full">
          <label class="dark:text-white text-black text-base font-normal  leading-7">Email*</label><input placeholder="Email" type="email" class="mt-2 w-full px-5 py-2 bg-white rounded-xl outline outline-1 outline-offset-[-1px] outline-black  overflow-hidden  text-[#898989] text-lg font-normal ">
        </div>
        <div class="w-full">
          <label class="dark:text-white text-black text-base font-normal  leading-7">Message*</label><textarea class="mt-2 w-full resize-none px-5 py-2 bg-white rounded-xl outline outline-1 outline-offset-[-1px] outline-black  overflow-hidden  text-[#898989] text-lg font-normal " placeholder="Message" cols="40" rows="10"></textarea>
        </div>
      </div>
      <button class=" px-9 py-5 bg-[#191a23] rounded-2xl  dark:bg-white text-center dark:text-[#191a23]  text-white text-xl font-normal  leading-7">Send Message</button>
    </div>
  </div>
</section>

Related Examples

Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.6k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.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

1 year ago

7.7k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

9.2k
stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Author:
Abhiraj

7 months ago

1.2k
Feedback Form with fabform.io

Author:
Ho O

8 months ago

983
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

4 months ago

571
User registration form

Author:
Laurits

2 years ago

11.3k
Login form

Author:
Leon Bachmann

2 years ago

12.9k
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

2 years ago

10.5k
Banner with Form

Author:
Aitrik Saha

7 months ago

1.1k
Contact page

Author:
Mahir

2 years ago

17.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components