JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <select>
    <option value="">Choose Category</option>
    <option value="">Category1</option>
    <option value="">Category2</option>
    <option value="">Category3</option>
  </select>
</label>

CSS

select{
    margin: 0;
    background: #fff;
    color:#333;
    border:1px solid #ccc;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	width:40%;
	padding:0 5px;
	height:36px;
	-webkit-padding-before:8px;
	-webkit-padding-after:8px;
	font-size:14px;
	cursor:pointer;
}

select option{
    padding:8px 5px;
}


label {position:relative}
label:after {
    content:'<>';
    font:14px "Consolas", monospace;
    color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:0px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#fff;
    position:absolute;
    pointer-events:none;
    display:block;
}