JSFiddle - React, Tailwind, and code Playground
HTML
<div class="dropdown dropdown-dark" style="margin-left: 10px">
<select class="ddText dropdown-select" id="opt" style="width: 90px;">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
CSS
.dropdown {
display: inline-block;
position: relative;
overflow: hidden;
height: 22px;
background: #f2f2f2;
border: 1px solid #bbc1c7;
border-radius: 3px;
background-image: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.06));
background-image: -moz-linear-gradient(top,transparent,rgba(0,0,0,.06));
background-image: -o-linear-gradient(top,transparent,rgba(0,0,0,.06));
background-image: linear-gradient(to bottom,transparent,rgba(0,0,0,.06));
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.08);
box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.dropdown:before, .dropdown:after {
content: '';
position: absolute;
z-index: 2;
top: 7px;
right: 10px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #888888 transparent;
pointer-events: none;
}
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
.dropdown-select {
position: relative;
width: 130%;
margin: 0;
padding: 6px 8px 6px 0px;
height: 24px;
line-height: 14px;
font-size: 12px;
color: #333;
text-shadow: 0 1px white;
background: #f2f2f2;
background: rgba(0,0,0,0)!important;
border: 0;
border-radius: 0;
-webkit-appearance: none;
bottom: 3px;
}
.dropdown-select:focus {
z-index: 3;
width: 100%;
color: #394349;
outline-offset: -2px;
}
.dropdown-select > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
background: #f2f2f2;
border-radius: 3px;
cursor: pointer;
}