JSFiddle - React, Tailwind, and code Playground

by bstst

HTML

<div id="bibis" class="stacias">
    <i></i>
    <b></b>
</div>

CSS

#bibis {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 50px;
    margin: -100px 0 0 -25px;
    background: blue;
    height: 50px;
}
#bibis.stacias {
    background: red;
    height: 200px;
    color: white;
}
#bibis.stacias i,
#bibis.stacias b {
    display: block;
}
i,
b {
    display: none;
    position: absolute;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: red;
}
i {
    left: -50px;
}
b {
    right: -50px;
}

JavaScript

$('#bibis').on('click', function(){
    $(this).addClass('stacias');
});
$(document).mouseup(function (e) {
    var container = $('#bibis');
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $('#bibis').removeClass("stacias");
    }
});