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>
    <button class="ten_drop-down" type="reset">▼</button>
    <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: 3em;
  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;
}