Dropdown

<div class="relative bg-slate-300 py-2 px-4 rounded-md">

    <input type="checkbox" id="dropdown" class="peer hidden absolute">
    <label for="dropdown" class="peer flex items-center space-x-1 cursor-pointer">
    <span class="text-lg">Dropdown</span>
    <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </label>


    <div
        class="w-full peer-checked:opacity-100 peer-checked:pointer-events-auto pointer-events-none absolute mt-1 right-0 top-full min-w-max shadow rounded opacity-0 bg-gray-300 border border-gray-400 transition delay-75 ease-in-out z-10">
        <ul class="flex flex-col text-black bg-slate-300">
            <li class="hover:bg-slate-200 p-2">Just</li>
            <li class="hover:bg-slate-200 p-2">CSS</li>
            <li class="hover:bg-slate-200 p-2">😄</li>
        </ul>
    </div>
</div>