JSFiddle - React, Tailwind, and code Playground

HTML

<input id="font" type="hidden" name="font" />
<h2 id="select_title">Choose Language</h2>
<ol class="select">
    <li>Times New Roman</li>
    <li>Comic Sans MS</li>
    <li>Verdana</li>
    <li>Lucida Sans Unicode</li>
</ol>

CSS

h2 {
    width: 200px;
    background: #222;
    color:  #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}
ol.select {
    display:none;
}

ol.select.toggled {
    overflow: auto;
}

ol.select > li {
    width: 200px;
    background: #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}

ol.select > li:hover, ol.select > li.active {
    background: #aaa;
}

JavaScript

$(".select li").each(function(){
    $(this).css("font-family", $(this).html());
});

$("#select_title").click(function(event) {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(".select").stop().slideUp(200);
    } else {
        $(this).addClass('active');
        $(".select").stop().slideDown(200);
    }
    event.preventDefault();
});

$(".select li").click(function(event) {
    $("#font").val($(this).html());
    $("#select_title").removeClass('active').css("font-family", $(this).html());
    $(".select").stop().slideUp(200);
    $("#select_title").html($(this).html());
});