User Dropdown UI

<div class="w-72 bg-white rounded-[2.5rem] shadow-2xl border border-slate-100 overflow-hidden">
        <div class="p-8 border-b border-slate-50 flex items-center gap-4 bg-slate-50/50">
            <div class="w-12 h-12 rounded-2xl bg-indigo-600 flex items-center justify-center text-white font-black">EV
            </div>
            <div>
                <p class="font-bold text-sm text-slate-900 leading-none">Erik Vance</p>
                <p class="text-[10px] text-slate-400 mt-1 uppercase font-black tracking-widest">Pro Member</p>
            </div>
        </div>
        <div class="p-4 space-y-1">
            <a href="#"
                class="flex items-center gap-3 px-4 py-3 hover:bg-indigo-50 rounded-2xl text-slate-600 hover:text-indigo-600 transition-all group">
                <svg class="w-4 h-4 opacity-40 group-hover:opacity-100" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                </svg>
                <span class="text-xs font-bold uppercase tracking-widest">Profile</span>
            </a>
            <a href="#"
                class="flex items-center gap-3 px-4 py-3 hover:bg-slate-50 rounded-2xl text-slate-600 transition-all group">
                <svg class="w-4 h-4 opacity-40 group-hover:opacity-100" fill="none" stroke="currentColor"
                    viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                    </path>
                </svg>
                <span class="text-xs font-bold uppercase tracking-widest">Security</span>
            </a>
            <div class="pt-4 border-t border-slate-50">
                <a href="#"
                    class="flex items-center gap-3 px-4 py-3 hover:bg-rose-50 rounded-2xl text-rose-500 transition-all group">
                    <svg class="w-4 h-4 opacity-40 group-hover:opacity-100" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 16l4-4m0 0l-4-4m4-4H7m6 4v1h8M7 21a2 2 0 01-2-2V5a2 2 0 012-2h4"></path>
                    </svg>
                    <span class="text-xs font-bold uppercase tracking-widest">Logout</span>
                </a>
            </div>
        </div>
    </div>