JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select">
        <ul>
            <li class="option darr">Dropdown one</li>
            <li class="option">Dropdown two</li>
            <li class="option">Dropdown three</li>
        <ul>
    </div>

CSS

.select ul li.option {
    background-color: #00B5D5;
    box-shadow: 0px 1px 0 #006577, 0px -1px 0 #006577;
    -webkit-box-shadow: 0px 1px 0 #006577, 0px -1px 0 #006577;
    -moz-box-shadow: 0px 1px 0 #006577, 0px -1px 0 #006577;
}

.select ul li.option:hover {
    background-color: #00BEDF;
}

.select ul li.option {
    z-index:1;
    padding:5px;
    display:none;
}

.select ul li:first-child {
    display:block;
}

.select ul li {
    cursor:default;
}

.rarr:after, .darr:after {
    content: ' ▼ ';
    float:left;
    padding:0 5px;
}

JavaScript

$('.select ul li.option').click(function() {
        $(this).siblings().toggle().removeClass('darr');
        $(this).addClass('darr');
    })