
<div class="relative" x-data="{ open: false }">
    <button @click="open = !open" @click.away="open = false" class="px-2 py-2 rounded font-semibold text-md  flex items-center">
        
        <div class="h-3 w-3 ml-2 fill-primary" :class="open?'rotate-180':''">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path>
            </svg> 
        </div>
    </button>
    <div x-show="open" class="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-lg shadow-lg z-10" x-transition style="display: none;">
        
    </div>
</div>
    
    
    
   