JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown" style="height: 20px; width: 100px;" data-on-change="alert('demo');">
        <div class="legend"></div>
        <ul class="elements">
            <li>Blue</li>
            <li>Green</li>
            <li>LightBlue</li>
            <li>Orange</li>
            <li>Purple</li>
            <li>Red</li>
            <li>Turquoise</li>
        </ul>
    </div>

JavaScript

/**
     * @type            Plugin
     * @name            OfficeUIDropdown
     *
     * @notes
     * This plugin makes it possible to transform a specific element into an OfficeUI DropDown element. This is done by
     * adding elements and other information.
     */
    $.fn.OfficeUIDropdown = function() {
        var dropdownElement = $(this); // Gets the element that should be transformed.

        /**
         * @type        Function
         * @name        hasFocus
         *
         * @returns     (boolean):  True if the element has focus, false otherwise.
         */
        $.fn.hasFocus = function() { return $(dropdownElement).hasClass('focus'); };

        /**
         * @type        Function
         * @name        isActive
         *
         * @returns     (boolean):  True if the element is active, false otherwise.
         */
        $.fn.isActive = function() { return $(dropdownElement).hasClass('active'); };

        /**
         * @type        Function
         * @name        isMenuOpened
         *
         * @returns     (boolean):  True if the menu of the DropDownElement is opened, false otherwise.
         */
        $.fn.isMenuOpened = function() { return $(dropdownElement).hasClass('opened'); };

        /**
         * @type        Function
         * @name        Open
         *
         * @notes
         * When this function is executed, the menu item holding all the items is toggled, and it can have 2 different
         * states, opened or opened. A class is added or removed from the 'dropdownElement' that helps to find out if
         * the menu is opened or closed.
         */
        $.fn.ToggleOpen = function() {
            // Check if the menu is opened or closed, based on that, hide or show the menu.
            if ($(dropdownElement).isMenuOpened()) {
                $('.elements', $(dropdownElement)).hide();
                $(dropdownElement).removeClass('opened');
            } else {
                $('.elements',...