JSFiddle - React, Tailwind, and code Playground

by roXon

HTML

<h2 class="tglOptions">Select an option</h2>


<div class="options">
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
</div>

<div id="temp"></div>

CSS

.options{
    background:#555;
    color:#cf5;
    padding:15px;
    display:none;
    width:160px;
}
.options li, .tglOptions{
    cursor:pointer;
}
#temp{
    position:absolute;
    display:none;
font-weight:bold;
}

JavaScript

$('.options li').click(function() {
    var thisEl = $(this);
    var thisPos = thisEl.position();
    $('#temp').css({left:thisPos.left+'px', top:thisPos.top+'px'});       
    $('#temp').html( thisEl.html() ).fadeTo(0, 1).delay(700).fadeTo(1000, 0, function(){
        $('#temp').empty();
    });
    $(".options").fadeToggle();
});


// the options button
$('.tglOptions').click(function() {
    $('.options').fadeToggle();
});