Estoy utilizando Tailwind. Tengo un input donde quiero poner un botón encima a la derecha y el botón puesto, pero no puedo hacerle click, he intentando poniéndole z-index, pero no hace nada y sigo sin poder hacer click
Anexo el input:
<link href="https://unpkg.com/tailwindcss@2.2.4/dist/tailwind.min.css" rel="stylesheet"/>
<div class="mt-1 relative rounded-md shadow-sm" style="position:relative; z-index: 4;">
<input type="text" name="autocomplete" id="autocomplete"
class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="Escribe algo para buscar">
<div class="z-50 absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
style="position:absolute; z-index: 9;">
<button id="clearSearch" style="position:relative; z-index: 10;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#6b7280">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>