Tailwind searchs

        
            
    <!-- Required form plugin -->
    <link
      href="https://cdn.jsdelivr.net/npm/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.css"
      rel="stylesheet"
    />
    <!-- Required font awesome -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.11.2/css/all.css"
    />

    <!-- Small -->
    <div class="relative flex w-full flex-wrap items-stretch mb-3">
      <span
        class="
          z-10
          h-full
          leading-snug
          font-normal
          absolute
          text-center text-gray-400
          absolute
          bg-transparent
          rounded
          text-base
          items-center
          justify-center
          w-8
          pl-2
          py-1
        "
      >
        <i class="fas fa-search"></i>
      </span>
      <input
        type="text"
        placeholder="Search"
        class="
          px-2
          py-1
          placeholder-gray-400
          text-gray-600
          relative
          bg-white bg-white
          rounded
          text-sm
          border border-gray-400
          outline-none
          focus:outline-none focus:ring
          w-full
          pl-10
        "
      />
    </div>

    <!-- Medium -->
    <div class="relative flex w-full flex-wrap items-stretch mb-3">
      <span
        class="
          z-10
          h-full
          leading-snug
          font-normal
          absolute
          text-center text-gray-400
          absolute
          bg-transparent
          rounded
          text-base
          items-center
          justify-center
          w-8
          pl-3
          py-3
        "
      >
        <i class="fas fa-search"></i>
      </span>
      <input
        type="text"
        placeholder="Search"
        class="
          px-3
          py-3
          placeholder-gray-400
          text-gray-600
          relative
          bg-white bg-white
          rounded
          text-sm
          border border-gray-400
          outline-none
          focus:outline-none focus:ring
          w-full
          pl-10
        "
      />
    </div>

    <!-- Large -->
    <div class="relative flex w-full flex-wrap items-stretch mb-3">
      <span
        class="
          z-10
          h-full
          leading-normal
          font-normal
          absolute
          text-center text-gray-400
          absolute
          bg-transparent
          rounded
          text-lg
          items-center
          justify-center
          w-8
          pl-3
          py-4
        "
      >
        <i class="fas fa-search"></i>
      </span>
      <input
        type="text"
        placeholder="Search"
        class="
          px-3
          py-4
          placeholder-gray-400
          text-gray-600
          relative
          bg-white bg-white
          rounded
          text-base
          border border-gray-400
          outline-none
          focus:outline-none focus:ring
          w-full
          pl-10
        "
      />
    </div>