JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<div class="container">
    <div id="settings">Settings</div>
    <div id="settingswindow">Blah blah click click</div>
</div>

CSS

#settings{
    display: inline-block;
    width: 70px;
    height: 20px;
    text-align: center;
    padding: 5px 5px;
    background: rgb(240,240,240);
    cursor: pointer;
}
#settings.highlighted{
    background: rgb(230,230,230);
}
#settingswindow{
    position: absolute;
    top: 30px;
    border: 1px solid gray;
    width: 200px;
    height: 200px;
    display: none;
    padding: 5px; 
}
.container{
    position: relative;
}

JavaScript

$("#settings").click(function(e){
    $("#settingswindow").toggle();
    $(this).toggleClass("highlighted");
    e.stopPropagation();
});
$(document).click(function(){
    $("#settingswindow").hide();
    $("#settings").removeClass("highlighted");
});
$("#settingswindow").click(function(e){
    e.stopPropagation();
});