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

Glassmorphism form

Geoffrey Callaghan

3 years ago

7.5k
Feedback Form with fabform.io

Ho O

1 year ago

1.8k
damatebis forma

Tamaz gogitidze

2 years ago

2.9k
Reset Password UI
Reset password screen built with pure HTML and Tailwind CSS. Includes new password and confirm password fields, password strength indicator, security requirements checklist, inline SVG icons, and a premium glassmorphism SaaS interface.

JUGENDRA GANGWAR

1 month ago

218
Survey form
User survey form

JaxStone

3 years ago

17.7k
Apply Coupon Code form

Lyra Ravensong

3 years ago

9.4k
Login template

Gabriel Urbano

2 years ago

7k
User registration form with Instructions

Fagundo67

3 years ago

25.3k
Feedback Form
Feedback Form with a map

Andreas Wagner

3 years ago

9k
form Rejoignez l'élite
formulaire Rejoignez l'élite

Omer fils ELENGA

8 months ago

758
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k