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

Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Author:
Bunny

3 years ago

50k
Apply Coupon Code form

Author:
Lyra Ravensong

2 years ago

8.7k
Forgot password form
Useful form for sending password reset link

Author:
Anonymous

1 year ago

1.8k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.3k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

9 months ago

1.1k
Contact us Form
suitable for dark-themed websites

Author:
Anja Müller

2 years ago

9.9k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

1 year ago

2.7k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

9.6k
Responsive Bank Card Information Form with TailwindCSS
A sleek and modern bank card information form built with raw HTML and styled using TailwindCSS. This responsive form includes fields for cardholder name, card number, expiry date, and CVV, designed for clean aesthetics and ease of use.

Author:
SHARIFUL ISLAM

11 months ago

1.6k
Glassmorphism form

Author:
Sophia Baker

2 years ago

18.3k
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

7 months ago

701
Elegant Login Form Design for Your Platform
A professionally designed and responsive login form built with TailwindCSS. Featuring a sleek layout with a gradient button, modern input fields, and user-friendly interactions, it’s perfect for any e-commerce, SaaS, or online platform. Includes options for "Forgot Password" and "Remember Me" functionality, providing a seamless user experience.

Author:
SHARIFUL ISLAM

11 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components