JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cs-select" id="social-media">
    <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="email">E-Mail</option>
        <option value="twitter">Twitter</option>
        <option value="linkedin">LinkedIn</option>
    </select>
</div>

<div class="cs-select" id="contact">
    <span class="cs-placeholder">Phone</span>
    <div class="cs-options cs-hidden">
        <ul>
            <li data-option="" data-value="email"><span>Phone</span></li>
            <li data-option="" data-value="twitter" class="cs-selected"><span>Mail</span></li>
            <li data-option="" data-value="linkedin"><span>Skype</span></li>
        </ul>
    </div>
    <select class="cs-select">
        <option value="email">Phone</option>
        <option value="twitter">Mail</option>
        <option value="linkedin">Skype</option>
    </select>
</div>

CSS

.cs-select {
    width: 130px;
    height: 20px;
    position: relative;
    text-align: center;
    display: inline-block;
    margin: 0px 20px;
}

.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 = (function() {
    var globalHandlers = [];
    window.addEventListener('click', function(e) {
        globalHandlers.forEach(function(fn) {
            fn.call(this, e, true);
        });
    });
    return class {
        constructor(selector) {
            var customSelect = document.querySelector(selector);
            this.select = customSelect.querySelector('select.cs-select');
            this.placeholder = customSelect.querySelector('.cs-placeholder');
            this.optionsHolder = customSelect.querySelector('.cs-options');
            this.options = [].slice.call(customSelect.querySelectorAll('.cs-options li'));
            this.attach();
        }
        attach() {
            this.placeholder.addEventListener('click', this.toggleSelect.bind(this), true);
            this.options.forEach(function(el) {
                el.addEventListener('click', this.chooseOption.bind(this, el), true);
            }, this);
            globalHandlers.push(this.toggleSelect.bind(this));
        }

        chooseOption(el, e) {
            e.stopPropagation();
            this.select.value = el.dataset.value;
            this.placeholder.innerHTML = el.innerHTML;
            this.toggleSelect(e, true);
        }

        toggleSelect(e, close) {
            e.stopPropagation();
            this.optionsHolder.classList.toggle('cs-hidden', close);
        }
    }
})();

new customSelect('#social-media');
new customSelect('#contact');