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

248

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

Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.6k
Profile Form
Stunning Profile and Cover Image Fields

Author:
Samuel Abera

1 year ago

4k
Profile Form
Profile form for taking user inputs

Author:
TailwindFlex

2 years ago

14.1k
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

11.6k
Simple login form

Author:
R Thapa

1 year ago

19.8k
Login form

Author:
Leon Bachmann

2 years ago

13.7k
Glassmorphism form

Author:
Sophia Baker

2 years ago

16.3k
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:
Anonymous

10 months ago

2.4k
Upload file input field

Author:
Gopi Yadav

2 years ago

13.3k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

9 months ago

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

9 months ago

1.7k
Sign up for newsletter form

Author:
Amit Pachange

1 year ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components