Home
ABDO-SY
form3

form3

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 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="grid sm:grid-cols-3 grid-cols-1 gap-6">
          <div>
            <label for="category" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Jop Type</label><select name="type" id="type" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2"><option value="Hourly" selected="">Hourly</option><option value="FixedRate">Fixed rate</option></select>
          </div>
          <div>
            <label for="from" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">From <span class="font-light">(Optional)</span></label>
            <div class="relative max-w-xs">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 text-lg font-medium">$</span><input type="text" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2 pl-8 font-light" placeholder="0.00" value="">
            </div>
          </div>
          <div>
            <label for="to" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">To <span class="font-light">(Optional)</span></label>
            <div class="relative max-w-xs">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 text-lg font-medium">$</span><input type="text" class="h-[50px] rounded-[5px] text-xs xs:text-sm border border-[#D1D5DB] w-full px-2 pl-8 font-light" placeholder="0.00" value="">
            </div>
          </div>
        </div>
        <div class="relative h-12 pt-3 mb-4"><input type="date" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg w-full pl-10 p-5" name="date" value="">
          <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"></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>

<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-3 xs:p-8">
    <h2 class="sm:text-xl text-[12px] font-bold mb-6">Publish</h2>
    <form>
      <div class="space-y-6">
        <div class="grid sm:grid-cols-4 grid-cols-4 gap-1">
          <div><label for="category" class="text-xs xs:text-sm font-medium text-gray-700 mb-1">Jop adience</label></div>
          <div class="flex items-center col-span-1">
            <input type="checkbox" id="custom-checkbox" class="appearance-none w-4 h-4 xs:w-5 xs:h-5 border border-black  rounded-sm bg-white checked:bg-[#4D7C0F] checked:border-[#4D7C0F] cursor-pointer transition-colors duration-200 ease-in-out relative"><label for="" class="ml-1 xs:ml-3 text-[14px]">Public</label>
          </div>
          <div class="flex items-center col-span-2">
            <input type="checkbox" id="custom-checkbox" class="appearance-none w-4 h-4 xs:w-5 xs:h-5 border border-black  rounded-sm bg-white checked:bg-[#4D7C0F] checked:border-[#4D7C0F] cursor-pointer transition-colors duration-200 ease-in-out relative" name="Invite"><label for="Invite" class="ml-1 xs:ml-3 text-[14px] xs:text-sm">Invite freelancer</label>
          </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">Post</button>
      </div>
    </form>
  </div>
</section>

Related Examples

Payment form (Alpine JS)

Author:
Mr Robot

3 years ago

10k
tailwind contact form template
tailwind contact form template

Author:
Ti To

1 year ago

5.2k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

3 years ago

23.3k
Responsive Form2

Author:
ABDO-SY

8 months ago

979
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

1 year ago

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

Author:
ehmasuk

6 days ago

17
update user
it is the layout for creating an event

Author:
seth dridi

1 year ago

1.8k
File upload form

Author:
Lukas Müller

2 years ago

13.3k
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

Author:
SHARIFUL ISLAM

8 months ago

1.2k
Reservation form with fabform.io

Author:
Ho O

9 months ago

1.3k
damatebis forma

Author:
Tamaz gogitidze

1 year ago

1.9k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components