JSFiddle - React, Tailwind, and code Playground

HTML

<div class='selectBox'>
        <span class='selected'></span>
        <span class='selectArrow'>&#9660</span>
        <div class="selectOptions" >
            <span class="selectOption" value="Option 1">Rob</span>
            <span class="selectOption" value="Option 2">Charles</span>
            <span class="selectOption" value="Option 3">Smith</span>
        </div>
    </div>

CSS

div.selectBox
        {
            position:relative;
            display:inline-block;
            cursor:default;
            text-align:left;
            line-height:30px;
            clear:both;
            color:#888;
        }
        span.selected
        {
            width:167px;
            text-indent:20px;
            border:1px solid #ccc;
            border-right:none;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            background:#f6f6f6;
            overflow:hidden;
        }
        span.selectArrow
        {
            width:30px;
            border:1px solid #60abf8;
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
            text-align:center;
            font-size:20px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            background:#4096ee;
        }

        span.selectArrow,span.selected
        {
            position:relative;
            float:left;
            height:30px;
            z-index:1;
        }

        div.selectOptions
        {
            position:absolute;
            top:28px;
            left:0;
            width:198px;
            border:1px solid #ccc;
            border-bottom-right-radius:5px;
            border-bottom-left-radius:5px;
            overflow:hidden;
            background:#f6f6f6;
            padding-top:2px;
            display:none;
        }

        span.selectOption
        {
            display:block;
            width:80%;
            line-height:20px;
            padding:5px 10%;
        }

        span.selectOption:hover
        {
            color:#f6f6f6;
            background:#4096ee; 
        }

JavaScript

$(document).ready(function() {
            enableSelectBoxes();
        });

        function enableSelectBoxes(){
            $('div.selectBox').each(function(){
                $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
                $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

                $(this).children('span.selected,span.selectArrow').click(function(){
                    if($(this).parent().children('div.selectOptions').css('display') == 'none'){
                        $(this).parent().children('div.selectOptions').css('display','block');
                    }
                    else
                    {
                        $(this).parent().children('div.selectOptions').css('display','none');
                    }
                });

                $(this).find('span.selectOption').click(function(){
                    $(this).parent().css('display','none');
                    $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
                    $(this).parent().siblings('span.selected').html($(this).html());
                });
            });             
        }
    //My code

$(document).mouseup(function (e)
{
    var container = $(".selectBox");

    if (!container.is(e.target)
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".selectOptions").hide();
    }
});