JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<div id='click'> &blacktriangledown;</div>
<div id='list'>
    <ol>
        <li class='l'>Hello</li>
        <li class='l'>Hola</li>
        <li class='l'>Bonjour</li>
    </ol>
</div>

CSS

body {
    background: #252525;
}
#click {
    border-radius: 0px;
    width: 150px;
    height: 20px;
    background: #4a4a4a;
    color: #96f226;
    cursor: pointer;
}
#click:hover {
    background: #656565;
}
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol li {
    background: #4a4a4a;
    color: #96f226;
    width: 150px;
    height: 20px;
    cursor: pointer;
}
ol li:hover {
    background: #656565;
}
.down {
    color: #4a4a4a;
    background: #96f226;
}

JavaScript

$(document).ready(function () {
    $('ol').hide();
    $('#click').click(function () {
        $(this).toggleClass('down');
        $('ol').toggle();
        $('.l').click(function () {
            var l = $(this).html();
            $('#click').html(l + ' &blacktriangledown;');
            $('ol').hide();
        });
    });
});