form3

This tailwind example is contributed by ABDO-SY, on 01-Mar-2025. Component is made with Tailwind v3.4. It is responsive.

Form

Author ABDO-SY

Tailwind v3.4 2.1k 5

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>