JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
	<div class="content">
		<h2>EXAMPLE:</h2>
		<div ref="select"></div>
	</div>

CSS

*{padding:0; margin:0;}

.content {
  font: 300 15px Roboto, Calibri;
  margin: 50px;
  width: 300px;
}
h2 {
  margin-bottom:10px;
}
    
.select__box {
	position: relative;
	font-family: Roboto, Arial;
	margin: 25px 0;
}

.select__toolbox {
	cursor: pointer;
	padding: 0.25em .5em;
	border-radius: 5px;
	border: 1px solid #2d8682;
}

.select__label {
	height: 25px;
	line-height: 25px;
	margin-right: 25px;
}

.select__arrow {
	position: absolute;
	font-style: normal;
	cursor: pointer;
	right: 0;
	bottom: 0;
	text-align: center;
	width: 30px;
	border-radius: 0 5px 5px 0;
	color: #2d2d2d;
}

.select__arrow:before{
	content: '›';
	transform: rotate(90deg);
	font-size: 30px;
	position: relative;
	margin: 5px 0 0 13px;
	float: left;
}

.select__dropdown {
	position: absolute;
	width: 100%;
	border-radius: 5px;
	border: 1px solid #2d8682;
	transition: all .3s;
	background: black;
	color: #fff;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
}

.select__dropdown--show {
	visibility: visible;
	opacity: 1;
}

.select__query {
	width: 270px;
	padding: 8px;
	margin: 6px;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #2d8682;
}

.select__query_noresult{
	padding: 0 10px 10px;
	display: block;
	font-size: 14px;
	color: #666;
}


.select__list {
	width: 100%;
	max-height: 275px;
	padding-left: 0;
	list-style: none;
	overflow-y: auto;
}

.select__item {
	cursor: pointer;
	padding: .5em;
}

.select__item:hover {
	background: #397271;
}

.select__item--selected {
	background: #46b6b4;
}

.select__item_icon {
	width: 1em;
	height: 1em;
	line-height: 1em;
	display: inline-block;
	text-align: center;
	margin-right: .25em;
}

.select__item_text {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.2px;
}

JavaScript

!(function (name, definition) {
    if (typeof define === 'function') {
        define(name, definition);
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = definition();
    } else {
        this[name] = definition();
    }
}('Select', function () {
    'use strict';

    class Component {

        constructor(props) {
            this.props = props || {};
            this.state = {};
            this.refs = {};
            this.$disposables = {
                mounted: [],
                updated: []
            };
        }

        $defer(stage, dispose) {
            this.$disposables[stage].push(dispose);
        }

        $dispose(stage) {
            this.$disposables[stage].reverse().forEach(dispose => dispose());
            this.$disposables[stage].length = 0;
        }

        componentMount(ctx) {
            this.$el && this.componentUnmount();
            this.componentWillMount();
            this.$el = (ctx && ctx.el) || document.createElement('div');
            this.$defer('mounted', () => {
                this.$el.innerHTML = '';
            this.$el = null;
        });
            this.forceUpdate();
            this.componentDidMount();
            return this;
        }

        componentWillMount() {}

        componentDidMount() {}

        componentUnmount() {
            this.componentWillUnmount();
            this.$dispose('mounted');
            this.componentDidUnmount();
            return this;
        }

        componentWillUnmount() {}

        componentDidUnmount() {}

        setState(updater, callback) {
            let prevState = this.state;
            let nextState = typeof updater == 'function' ? updater(prevState, this.props) : updater;
            this.state = Object.assign(prevState, nextState);
            if (this.shouldComponentUpdate(prevState, nextState)) {
                this.forceUpdate();
            }
            callback && callback.call(this);
            return...