background with transparent gradient doesn't work in input field

I'm trying to create a transparent input with tailwind, but apparently it doesn't work with inputs.

My code is simple, as follows:

<div className="max-h-16 flex items-center rounded-full border bg-slate-600 border-neutral-300">    
    <div className="grow-0 inline-block flex-wrap  ml-3 pointer-events-none">
        <SearchIcon className="w-5 h-5 text-gray-500 dark:text-gray-400"/>
    </div>
    
    <input type="search"
    className=" bg-gradient-to-l from-indigo-500 h-12 pl-3 outline-none flex-auto basis-24 rounded-full"
    placeholder="Search Tags" required/>
    
<div>

is there any way to solve this?

I tested it on a common div, and it works, but the input doesn't work.