JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cs-select">
    <span class="cs-placeholder">Twitter</span>
    <div class="cs-options cs-hidden">
        <ul>
            <li data-option="" data-value="email"><span>E-Mail</span></li>
            <li data-option="" data-value="twitter" class="cs-selected"><span>Twitter</span></li>
            <li data-option="" data-value="linkedin"><span>LinkedIn</span></li>
        </ul>
    </div>
    <select class="cs-select">
        <option value="" disabled="" selected="">Preferred contact method</option>
        <option value="email">E-Mail</option>
        <option value="twitter">Twitter</option>
        <option value="linkedin">LinkedIn</option>
    </select>
</div>

CSS

.cs-select {
    width: 130px;
    height: 20px;
    position: relative;
    text-align: center;
}

.cs-options ul {
    position: absolute;
    left: 0;
    text-align: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.cs-select select {
    display: none;
}

.cs-placeholder {
    display: block;
}

.cs-placeholder,
.cs-options li {
    border: #cce 2px solid;
    width: 100%;
    padding: 5px;
	background-color: white;
	transition: background-color .4s;
}

.cs-placeholder:hover,
.cs-options li:hover {
    cursor: pointer;
    background-color: #fdd;
}

.cs-hidden {
    display: none;
}
.cs-placeholder:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 5px solid #999;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5x solid transparent;
    margin-top: 0px;
}

JavaScript

var customSelect = document.querySelector('div.cs-select');
var select = customSelect.querySelector('select.cs-select');
var placeholder = customSelect.querySelector('.cs-placeholder');
var optionsHolder = customSelect.querySelector('.cs-options');
var options = [].slice.call(customSelect.querySelectorAll('.cs-options li'));

function chooseOption(e) {
    e.stopPropagation();
    select.value = this.dataset.value;
    placeholder.innerHTML = this.innerHTML;
	toggleSelect(e, true);
}
function toggleSelect(e, close) {
    e.stopPropagation();
    optionsHolder.classList.toggle('cs-hidden', close || this == window);
}

placeholder.addEventListener('click', toggleSelect, true);
window.addEventListener('click', toggleSelect);
options.forEach(function(el) {
    el.addEventListener('click', chooseOption, true);
});