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

733

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

Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

6.3k
Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Author:
Arya

3 years ago

11.9k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

2 months ago

216
Responsive contact us section

Author:
Ron Hicks

2 years ago

14.5k
Login Form with Icon

Author:
Prashant

3 years ago

17.1k
Instagram Login Clone

Author:
Victoria Blount

2 months ago

106
Book appointment form

Author:
Lukas Müller

2 years ago

26.7k
Otp form
SImple opt form with resend and verify button

Author:
Rafferty Kim

2 years ago

10.4k
Age verification 18+

Author:
Maxim

8 months ago

610
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

1 year ago

1.8k
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.1k
Sign Up form with dark mode support

Author:
Anonymous

1 year ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components