JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="select-wrapper">
<select>
<option>EEE</option>
<option>ECE</option>
<option>EIE</option>
</select>
</div>
</div>
CSS
.select-wrapper {
display:inline-block;
position:relative;
width:140px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin-top: 10px;
overflow:hidden;
background-color:#ededed;
margin-left:-20px;
border-right: 1px solid #bababa;
}
.select-wrapper:before {
content:"";
position:absolute;
right: 5px;
top:8px;
border-width: 5px 5px 5px 5px;
border-style: solid;
border-color: #666666 transparent transparent transparent;
z-index:3;
}
.select-wrapper:after {
content:"";
display:block;
position:absolute;
top:0px;
bottom:0px;
width:20px;
right:0px;
border-left:1px solid #bababa;
background-color:#ededed;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
}
select {
width:100%;
background-color:transparent;
border:none;
outline:none;
padding:0px;
margin:0px;
position:relative;
z-index:4;
margin-left:20px;
border: 1px solid #bababa;
border-right: 0px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.parent {
display:inline-block;
overflow:hidden;
}