Collapse classes

Simple collapse (with Vue.js) 

<div class="dropdown-component dropdown-primary">
    <div class="dropdown dropdown-default" @click="show()">
        <div class="p-2">
            Simple dropdown
        </div>
        <div>
            <svg>
                ...content
            </svg>
        </div>
    </div>
    <div ref="body" class="dropdown-list dropdown-list-default dropdown-bottom hidden">
        <ul>
            <li class="dropdown-item">...</li>   
        </ul>
    </div>
</div>
Simple dropdown
Class name
@apply
.dropdown-component
@apply relative
.dropdown, .dropdown-hover
@apply relative flex items-center justify-between
.dropdown-default
"@apply px-3 font-semibold rounded-lg shadow-lg clickeable
.dropdown-list
@apply absolute inset-x-0 f-col
.dropdown-list-default
@apply shadow-lg p-4 rounded-md text-black
.dropdown-item
@apply p-1 text-lg font-bold cursor-pointer select-none

Structure

.dropdown-component
.dropdown
.body
ul

If you use .dropdown-hover, you don't need any JS code. For .dropdown, you just need toggle display: hidden.