JSFiddle - React, Tailwind, and code Playground

HTML

<p class="desc">The control down here is a dropdown made with CSS and jQuery. It is bound to SELECT element on the page which isn't hidden intentionally.</p>
        <select id="source" multiple="multiple">
            <option selected="selected" value="BR">Brasil</option>
            <option value="FR">France</option>
            <option value="DE">Germany</option>
            <option value="IN">India</option>
            <option value="JP">Japan</option>
            <option value="RS">Serbia</option>
            <option value="UK">United Kingdom</option>
            <option value="US">United States</option>
        </select>

CSS

body {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.75em;
    color: #000;
}

.desc {
    color: #6b6b6b;
}

.desc a {
    color: #0092dd;
}

.dropdown dd, .dropdown dt, .dropdown ul {
    margin: 0px;
    padding: 0px;
}

.dropdown dd {
    position: relative;
}

.dropdown a, .dropdown a:visited {
    color: #816c5b;
    text-decoration: none;
    outline: none;
}

.dropdown a:hover {
    color: #5d4617;
}

.dropdown dt a:hover {
    color: #5d4617;
    border: 1px solid #d0c9af;
}

.dropdown dt a {
    background: #e4dfcb url(arrow.png) no-repeat scroll right center;
    display: block;
    padding-right: 20px;
    border: 1px solid #d4ca9a;
    width: 160px;
    padding: 5px;
}

.dropdown dt a span {
    cursor: pointer;
    display: block;
}

.dropdown dd ul {
    background: #e4dfcb none repeat scroll 0 0;
    border: 1px solid #d4ca9a;
    color: #C5C0B0;
    display: none;
    left: 0px;
    padding: 5px 0px;
    position: absolute;
    top: 2px;
    width: auto;
    min-width: 170px;
    list-style: none;
}

.dropdown span.value {
    display: none;
}

.dropdown dd ul li a {
    padding: 5px;
    display: block;
}

.dropdown dd ul li a:hover {
    background-color: #d0c9af;
}

.dropdown img.flag {
    border: none;
    vertical-align: middle;
    margin-left: 10px;
}

.flagvisibility {
    display: none;
}

JavaScript

$(document).ready(function() {
            createDropDown();
            
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });

            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });
                        
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a").html(text);
                $(".dropdown dd ul").hide();
                
                var source = $("#source");
                source.val($(this).find("span.value").html())
            });
        });
        
        function createDropDown(){
            var source = $("#source");
            var selected = source.find("option[selected]");
            var options = $("option", source);
            
            $("body").append('<dl id="target" class="dropdown"></dl>')
            $("#target").append('<dt><a href="#">' + selected.text() + 
                '<span class="value">' + selected.val() + 
                '</span></a></dt>')
            $("#target").append('<dd><ul></ul></dd>')

            options.each(function(){
                $("#target dd ul").append('<li><a href="#">' + 
                    $(this).text() + '<span class="value">' + 
                    $(this).val() + '</span></a></li>');
            });
        }