<div class="flex flex-col md:flex-row md:justify-center gap-4">
  <!--Field-->
  <div class="flex-1">
    <div>
      <div class="group relative rounded-md shadow-sm">
        <input
          class="
            w-full
            h-14
            bg-white
            dark:bg-muted-700
            rounded-lg
            border border-muted-300
            dark:border-muted-500
            focus:shadow-xl focus:shadow-muted-400/10
            dark:focus:shadow-muted-800/10
            placeholder:text-muted-300
            dark:placeholder:text-muted-500
            text-base text-muted-600
            dark:text-muted-200
            pl-14
            pr-4
            py-2
            transition-all
            duration-300
            tw-accessibility
          "
          placeholder="Job title or keywords"
          type="text"
        />
        <div
          class="
            absolute
            top-0
            left-0
            h-14
            w-14
            flex
            justify-center
            items-center
            text-muted-400
            group-focus-within:text-primary-500
            transition-colors
            duration-300
          "
        >
          <i class="iconify w-5 h-5" data-icon="lucide:search"></i>
        </div>
      </div>
    </div>
  </div>
  <!--Field-->
  <div class="flex-1">
    <div class="relative group">
      <div class="relative">
        <select
          title="select"
          class="
            appearance-none
            pl-14
            pr-4
            py-2
            h-14
            leading-5
            font-sans
            w-full
            rounded-lg
            border border-muted-300
            bg-white
            text-muted-600
            placeholder:text-muted-300
            focus:border-muted-300 focus:shadow-lg
            dark:placeholder:text-muted-600
            dark:bg-muted-700
            dark:text-muted-200
            dark:border-muted-600
            dark:focus:border-muted-600
            tw-accessibility
            transition-all
            duration-300
          "
        >
          <option>All Locations</option>
          <option>Superman</option>
          <option>Batman</option>
          <option>Iron man</option>
          <option>Magneto</option>
          <option>Cyclops</option>
        </select>
        <div
          class="
            absolute
            top-0
            left-0
            h-14
            w-14
            flex
            justify-center
            items-center
            text-muted-400
            group-focus-within:text-primary-500
            transition-colors
            duration-300
          "
        >
          <i class="iconify w-5 h-5" data-icon="lucide:globe"></i>
        </div>
        <div
          class="
            absolute
            top-0
            right-0
            h-14
            w-14
            flex
            justify-center
            items-center
            text-muted-400
            transition-transform
            duration-300
            group-focus-within:-rotate-180
          "
        >
          <i class="iconify w-5 h-5" data-icon="lucide:chevron-down"></i>
        </div>
      </div>
    </div>
  </div>
  <!--Field-->
  <div class="flex-1">
    <div class="relative group">
      <div class="relative">
        <select
          title="select"
          class="
            appearance-none
            pl-14
            pr-4
            py-2
            h-14
            leading-5
            font-sans
            w-full
            rounded-lg
            border border-muted-300
            bg-white
            text-muted-600
            placeholder:text-muted-300
            focus:border-muted-300 focus:shadow-lg
            dark:placeholder:text-muted-600
            dark:bg-muted-700
            dark:text-muted-200
            dark:border-muted-600
            dark:focus:border-muted-600
            tw-accessibility
            transition-all
            duration-300
          "
        >
          <option>All categories</option>
          <option>Superman</option>
          <option>Batman</option>
          <option>Iron man</option>
          <option>Magneto</option>
          <option>Cyclops</option>
        </select>
        <div
          class="
            absolute
            top-0
            left-0
            h-14
            w-14
            flex
            justify-center
            items-center
            text-muted-400
            group-focus-within:text-primary-500
            transition-colors
            duration-300
          "
        >
          <i class="iconify w-5 h-5" data-icon="lucide:box"></i>
        </div>
        <div
          class="
            absolute
            top-0
            right-0
            h-14
            w-14
            flex
            justify-center
            items-center
            text-muted-400
            transition-transform
            duration-300
            group-focus-within:-rotate-180
          "
        >
          <i class="iconify w-5 h-5" data-icon="lucide:chevron-down"></i>
        </div>
      </div>
    </div>
  </div>
  <!--Field-->
  <div class="shrink">
    <button
      type="button"
      class="
        w-full
        ptablet:w-24
        ltablet:w-44
        lg:w-44
        h-14
        flex
        items-center
        justify-center
        py-3
        px-4
        border border-transparent
        text-base
        font-medium
        rounded-md
        text-white
        bg-primary-600
        hover:bg-primary-500
        transition
        duration-150
        ease-in-out
        tw-accessibility
      "
    >
      Search
    </button>
  </div>
</div>
