Home
ABDO-SY
Responsive Form

Responsive Form

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

Form

Author ABDO-SY

1.1k

Fork Fullscreen

<section class="bg-white 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">Title</h2>
    <form>
      <div class="space-y-6">
        <div>
          <label for="title" class="text-xs xs:text-sm font-medium text-gray-700 mb-1 ">Job Title <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" color="#9CA3AF" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert inline-block"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="8" y2="12"></line><line x1="12" x2="12.01" y1="16" y2="16"></line></svg> </label><input type="text" id="title" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2" name="title" value="">
        </div>
        <div class="grid sm:grid-cols-2 grid-cols-1 gap-6">
          <div>
            <label for="category" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Category</label><select name="category" id="category" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2"><option value="" selected="">Select</option><option value="HR">HR</option><option value="programming">Programming</option></select>
          </div>
          <div>
            <label for="subcategory" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Subcategory</label><select name="subcategory" id="subcategory" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2"><option value="" selected="">Select</option><option value="HR-1">HR-1</option><option value="programming-1">Programming-1</option></select>
          </div>
        </div>
        <div class="grid sm:grid-cols-2 grid-cols-1 gap-6">
          <div>
            <label for="country" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Country <span class="font-light">(Optional)</span></label><select name="country" id="country" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2"><option value="" selected="">Select</option><option value="syria">Syria</option><option value="turkey">Turkey</option></select>
          </div>
          <div><label for="language" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Language</label>
            <div class="flex flex-wrap items-center border rounded-md xs:p-2 bg-white">
              <span class="bg-[#D9F99D] text-[#4D7C0F] px-1 py-0 xs:px-2 xs:py-1 rounded m-1 text-xs xs:text-sm flex items-center">Arabic<button class="ml-1 text-[#4D7C0F] focus:outline-none" type="button">×</button></span><input type="text" placeholder="Add language" class="flex-grow outline-none py-2 w-2/3 text-sm xs:ml-2" value="">
            </div>
          </div>
        </div>
      </div>
      <div class="mt-8 pt-6 border-t border-gray-200 flex justify-end">
        <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

Car booking form
Rental carr booking form to rent a car online

Author:
ehmasuk

3 months ago

269
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

2 years ago

10.9k
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6.3k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.8k
Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

2.5k
Sign up for newsletter form

Author:
Amit Pachange

2 years ago

12.1k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

Author:
wavy kits

4 months ago

217
Records Form - HPower
records survey form

Author:
Anonymous

1 year ago

1.2k
Email format
This is a ui component to be used to send emails with custom design (deigned with tailwindcss)

Author:
Ranit Saha

1 year ago

1.2k
Login form

Author:
Aman kumar

2 years ago

4.5k
User registration form

Author:
Laurits

3 years ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components