Responsive Form2

This tailwind example is contributed by ABDO-SY, on 01-Mar-2025. Component is made with Tailwind v3.4. It is responsive.

Form

Author ABDO-SY

Tailwind v3.4 1.7k 5

Fork Fullscreen

<section class="bg-white mt-4 p-1 xs:p-8">
  <div class=" max-w-96 sm:max-w-4xl mx-auto border border-[#4D7C0F] rounded-lg p-8">
    <h2 class="sm:text-xl text-[12px] font-bold mb-6">Description and Skills</h2>
    <form>
      <div class="space-y-6">
        <div class="job-description mb-[20px]"><label for="job-desc" class="block mb-[5px]">Job Description</label>
          <div class="text-editor-toolbar  border rounded-[5px] h-14 border-[#ccc] mb-[10px]">
            <button class="ml-3  sm:mr-[5px] sm:ml-5 sm:pt-4 bg-none  rounded-[3px]">B</button><button class="ml-3  sm:mr-[5px] sm:p-[5px_20px] bg-none rounded-[3px]"><i>i</i></button><button class="ml-3 sm:mr-[5px] sm:p-[5px_10px] bg-none  rounded-[3px]"><u>U</u></button><button class="ml-3 sm:mr-[5px] sm:p-[5px_20px] bg-none   rounded-[3px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-left"><line x1="21" x2="3" y1="6" y2="6"></line><line x1="15" x2="3" y1="12" y2="12"></line><line x1="17" x2="3" y1="18" y2="18"></line></svg></button><button class="ml-3 mt-3 sm:mr-[5px] sm:p-[3px_10px] bg-none  rounded-[3px]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-5 "><path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99"></path></svg></button><button class="ml-3 sm:mr-[5px] sm:p-[5px_15px] bg-none text-lg  rounded-[3px]">"</button>
          </div>
          <textarea name="description" style="resize:none" id="job-desc" class="w-full sm:h-[150px] h-[120px] border border-[#4D7C0F] rounded-[5px] p-[10px]"></textarea>
        </div>
        <div class="grid sm:grid-cols-1 grid-cols-1 gap-6">
          <div><label for="skills" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Required Skills</label>
            <div class="flex flex-wrap items-center border rounded-md p-2 bg-white">
              <span class="bg-[#D9F99D] text-[#4D7C0F] px-2 py-1 rounded m-1 text-sm flex items-center">UI/UX<button class="ml-1 text-[#4D7C0F] focus:outline-none" type="button">×</button></span><input type="text" placeholder="Add skill" class="flex-grow outline-none text-sm ml-2" value="">
            </div>
          </div>
        </div>
      </div>
      <div class="mt-8 pt-6 border-t border-gray-200 flex justify-between">
        <button class="hidden sm:block underline-offset-8">back</button><button type="submit" class=" sm:w-[86px] w-full h-[50px] text-xs sm:text-base bg-[#4D7C0F] rounded-[5px] p-[13px_25px] gap-[10px] text-white">Next</button>
      </div>
    </form>
  </div>
</section>

Related Examples

Login Form
Login Card Structure This code gives you a complete, self-contained login card. Here's what's included: Input Fields: Email and password fields with icons, labels, and placeholder text. The password field includes a "Forgot password?" link. Options & Actions: A "Remember me" checkbox and a prominent "Sign In" button with hover effects. Footer Links: A "Create one" link for new accounts and social login icons (Google and GitHub) for alternative sign-in methods.

Muzammil Riaz

3 months ago

183
Sign up for newsletter form

Amit Pachange

3 years ago

12.7k
Register Form
A simple and minimalistic register form.

Sonam Sherpa

1 year ago

915
Contact me form

Arya

3 years ago

13k
Default phone input

Md. Tofayel islam

2 years ago

3.7k
free tailwind personal portfolio template
free tailwind personal portfolio template

Geoffrey Callaghan

2 years ago

6k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

2 years ago

7.7k
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.

ReadyMadeUI

10 months ago

655
ÉMERAUDERDV login mobil compo
ÉMERAUDERDV login mobil compo

Omer fils ELENGA

1 month ago

15
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Ti To

2 years ago

7.8k
Modern responsive Newsletter form
Responsive newsletter subscriber form

Emdadul Islam

2 years ago

3.5k
Feedback Form

JaxStone

3 years ago

16k