JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="actionsDropdown"> 
    <a data-bind="dropdown: showDropdown, 
                  click: toggleDropdownVisibility,
                  css: { active: showDropdown() == true }">Actions</a>

    <ul data-bind="visible: showDropdown">
        <li>Option 1</li>
        <li>Option 2</li>
    </ul>
</div>

CSS

#actionsDropdown {
    width: 50%;
    font-family: arial, helvetica, sans-serif;
}
#actionsDropdown > a {
    border:1px solid #ccc;
    cursor: pointer;
    display:block;
    padding:5px;
}
#actionsDropdown ul {
    background-color:#eee;
    margin:0;
    padding:10px;
    list-style-type:none;
}

JavaScript

var MyViewModel = function () {
    
    this.showDropdown = ko.observable(false);
    this.toggleDropdownVisibility = function () {
        this.showDropdown(!this.showDropdown());
    };

}

ko.bindingHandlers.dropdown = {
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var valueUnwrapped = ko.unwrap(value);
        if (valueUnwrapped) {
            $(document).on('click.dropdown', function (e) {
                var $target = $(e.target);
                if ($target.parents('#actionsDropdown').length === 0) {
                    value(false);
                }
            });
        } else {
            $(document).off('click.dropdown');
        }
    }
};

ko.applyBindings(new MyViewModel(), document.getElementById('actionsDropdown'));