JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="instruct-pages" style="display: none;">
    <ul>
        <li class="section">Section Title</li>
        <li><a href="#">Page 1</a>
        </li>
        <li><a href="#">Page 2</a>
        </li>
        <li><a href="#">Page 3</a>
        </li>
        <li class="section">Section Title</li>
        <li><a href="#">Page 1</a>
        </li>
        <li><a href="#">Page 2</a>
        </li>
    </ul>
</div>
<a id="pages-btn" href="#">Pages</a>

CSS

#instruct-pages {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    background: #f2f2f2;
}
#instruct-pages ul {
    list-style-type: none;
    margin: 0px;
    padding: 10px;
}
#instruct-pages ul li {
    display: inline-block;
    float: left;
    clear: both;
}
#instruct-pages ul li a {
    display: inline-block;
    padding: 5px 12px;
}
#pages-btn {
    padding: 5px;
    background: #fafafa;
    border: 1px solid #cccccc;
}
.options-active {
    outline:1px dashed red;   
}
}

JavaScript

$("#pages-btn").click(function () {
        var $instructPages = $("#instruct-pages");
        if ($instructPages.is(":visible"))
        {
            $instructPages.fadeOut();
            $(this).removeClass("options-active");
        }
        else
        {
            $instructPages.fadeIn();
            $(this).addClass("options-active");
        }
    });
    $(document).mouseup(function (e) {
        var container = $("#instruct-pages");
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.fadeOut();
            $("#pages-btn").removeClass("options-active");
        }
    });