JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown-emulator">
  <div class="dropdown-emulator-selected"></div>
  <a href="#" class="dropdown-emulator-select-btn" onclick="showDropDown(this);return false;">v</a>
  <ul>
    <li>Option 1 </li>
    <li>Option 2 </li>
  </ul>
</div>

CSS

.dropdown-emulator-selected{
    width:100px;
    padding:5px;
    border:1px solid #000;
    float:left;
    height:20px
}

.dropdown-emulator-select-btn{
    float:left;
    padding:5px;
    border:1px solid #000;
    height:20px;
    width:20px;
    text-decoration:none;
    font-family:helvetica;
    text-align:center;
}

.dropdown-emulator{
  position:relative;
}

.dropdown-emulator ul{
  position:absolute;
  top:27px;
  left:0;
  list-style:none;
  margin:0;
  display:none;
  padding:0;
}

.dropdown-emulator ul li{
    padding:5px;   
}

JavaScript

function showDropDown(element){
   var listElement = element.parentNode.getElementsByTagName('ul').item(0);
    if(listElement.getAttribute('style')=="display:block;"){
        listElement.setAttribute('style','display:none;');
    }else{
        listElement.setAttribute('style','display:block;');
    }
}