Home
ABDO-SY
Responsive Form2

Responsive Form2

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

892

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

Simple Sign up form
A responsive simple singup or login form

Author:
Emdadul Islam

1 year ago

1.9k
Glassmorphism form

Author:
Sophia Baker

2 years ago

17.6k
Extreme Signup Page
I create a signup page using html, tailwindcss and font awesome icons using cdn.

Author:
Akram Khan

1 year ago

2.5k
Login Form Component
The "Login Form Component" is a visually appealing and user-friendly interface designed for user authentication. It features a clean and well-structured layout with fields for entering the email address and password.

Author:
R Thapa

2 years ago

8k
Contact us Form with Responsive

Author:
KULDEEP

2 months ago

194
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

2 months ago

657
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

5 months ago

890
Register form

Author:
Maxim

8 months ago

1.1k
Forgot password form (fullscreen)

Author:
Prajwal Hallale

2 years ago

12.2k
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

7 months ago

890
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

3 months ago

250
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

Author:
Steve NGOYA

3 months ago

286

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components