<div class="relative flex items-center max-w-sm w-full mx-2 dark:text-gray-200">
    <label for="searchbar" class="pl-4"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8" /> <line x1="21" y1="21" x2="16.65" y2="16.65" /> </svg> </label>
    <input
        id="searchbar"
        type="search"
        placeholder="Search here.."
        class="peer placeholder:text-gray-500 placeholder:font-normal py-2.5 px-3 bg-transparent outline-none w-full" />
    <div class="absolute rounded-full w-full h-full pointer-events-none border-gray-500 dark:border-gray-200/60 peer-focus:outline-gray-600 border peer-focus:outline-2 peer-focus:outline dark:peer-focus:outline-gray-200/50 peer-focus:border-transparent bg-transparent"></div>
</div>