JSFiddle - React, Tailwind, and code Playground

HTML

<form
    method="get"
    action="http://ya.ru"
    target="_blank"
    >
    <div class="ten_drop-button">
        <button
            class="ten_button"
            type="submit"
            name="action"
            value="default"
            >
            Action
        </button>
        <input
            class="ten_drop-down"
            type="text"
            value="â–Ľ"
        />
        <fieldset class="ten_pop-up">
            <button
                class="ten_menu-item"
                type="submit"
                name="action"
                value="first"
                >
                First
            </button>
            <button
                class="ten_menu-item"
                type="submit"
                name="action"
                value="second"
                >
                Second
            </button>
            <button
                class="ten_menu-item"
                type="submit"
                name="action"
                value="third"
                >
                Third
            </button>
        </fieldset>
    </div>
</form>

CSS

body {padding:10%;}

.ten_drop-button {
    white-space: nowrap;
    position: relative;
    display: inline;
}

.ten_pop-up { display: none }

.ten_button,
.ten_drop-down {
    background: #659A22 repeat-x;
    background-image: -webkit-linear-gradient(top, #9AC92C, #659A22);
    background-image: -o-linear-gradient(top, #9AC92C, #659A22);
    background-image: -moz-linear-gradient(top, #9AC92C, #659A22);
    background-image: linear-gradient(top, #9AC92C, #659A22);
    border: 1px solid rgba(0, 0, 0, 0.0976563);
    border-bottom-color: rgba(0, 0, 0, 0.246094);
    border-top-color: rgba(255, 255, 255, 0.148438);
    border-radius: 2px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 5px 10px;
    text-shadow: #659A22 1px 1px 0px;
    -webkit-transition: 0.1s linear all;
    position: relative;
    z-index: 1;
}
.ten_button {
    position: relative;
}
.ten_drop-down {
    white-space: nowrap;
    width: 1em;
    margin-left: -.75em;
    position: relative;
    z-index: 0;
    text-align: right;
    outline: none;
}

.ten_drop-down:focus + .ten_pop-up,
.ten_pop-up:hover {
    display: block;
    right: 0;
    position: absolute;
    margin: 0 0 0 0;
    padding: 0;
    z-index: 1;
    border: 1px solid #ccc;
    border-top-color: #cfcfcf;
    border-image: initial;
    background: #fff;
    color: #659A22;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.ten_menu-item {
    text-shadow: none;
    display: block;
    width: 100%;
    border: none;
    margin: 0;
    padding: 2px 10px;
    background: none;
    color: black;
    text-align: left;
    cursor: pointer;
}
.ten_menu-item:hover {
    background: #75aA32;
    color: white;
    text-shadow: #659A22 1px 1px 0px;
}