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.5k

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

Tailwind CSS Contact Form
A clean contact form with a supporting image, built using Tailwind CSS by ReadymadeUI. Browse more free UI components and templates at readymadeui.com.

Author:
ReadyMadeUI

1 month ago

91
Default phone input

Author:
Md. Tofayel islam

1 year ago

3.1k
Instagram Login Clone
login form and signup

Author:
gidy

7 months ago

492
SingIn / Signup Form
A modern and responsive authentication card with Sign In & Sign Up options, featuring a seamless toggle and social login (Facebook, GitHub). Designed with Tailwind CSS, it offers a clean UI, smooth transitions, and full mobile responsiveness.

Author:
Rajesh Maheshwari

10 months ago

1.5k
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
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Author:
Nicole Shalom

7 months ago

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

Author:
ehmasuk

2 months ago

251
User registration form

Author:
Leon Bachmann

2 years ago

25k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

8 months ago

578
Age verification 18+

Author:
Maxim

1 year ago

1k
Sign Up form with dark mode support

Author:
Anonymous

2 years ago

12.2k
Login Form with Icon

Author:
Akai

3 months ago

160

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components