Dropdown

This dropdown is an example created using shorthand classes. There is no shorthand class of dropdown

.dropdown-menu class and jquery used in this example is not a part of the framework. We used it for demonstration purpose only. You can either use it or can write your own.

Dropdown 
<div class="relative inline-block ">
    <a class="button" data-toggle="dropdown">
        Dropdown 
        <i data-feather="chevron-down" class="h-5 ml-1"></i>
    </a>
    <div class="dropdown-menu hidden absolute z-100 left-0 top-100pc py-1 fs-s2">
        <div class="shadow-3 br-6 bg-white min-w-l10 border">
            <a class="block p-3 hover-bg-gray-lightest no-underline" href="#"> ... </a>
            <a class="block p-3 hover-bg-gray-lightest no-underline" href="#"> ... </a>
            <a class="block p-3 hover-bg-gray-lightest no-underline" href="#"> ... </a>
        </div>
     </div>
</div>
<!-- jquery -->
<script>
    $(document).on('click',function(event) { 
        $target = $(event.target);
        if(!$target.closest('.dropdown-menu').length && $('.dropdown-menu').is(":visible")) {
            $('.dropdown-menu:visible').toggleClass('hidden');
        }
    });
    $(document).on('click', '[data-toggle=dropdown]', function () {
        $(this).siblings('.dropdown-menu').toggleClass('hidden');
        return false;
    });
    $('.dropdown-menu').on('click',function(event){
        event.stopPropagation();
    });
</script>