JSFiddle - React, Tailwind, and code Playground
HTML
<label class="select">
<select class="select__control">
<option>aaaa1</option>
<option>aaaa2</option>
<option>aaaa3</option>
<option>aaaa4</option>
<option>aaaa5</option>
<option>aaaa6</option>
</select>
<span class="select__icon">i</span>
</label>
CSS
.select {
display: block;
overflow: hidden;
height: 40px;
width: 100%;
position: relative;
font-size: 16px;
}
.select__control {
height: 40px;
padding: 5px;
border: 0;
border: 1px solid #ccc;
width: 100%;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.select__icon{
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: #00f;
color: #fff;
pointer-events: none;
box-sizing: border-box;
}