JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="select_box">
     <span class="cus_selt">Select a value*</span>
     <select>
        <option>Select</option>
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
        <option>option5</option>
        <option>option6</option>
        <option>option7</option>
      </select>
   </div>
 </div>

CSS

.wrapper{width:250px;margin:10px auto;}
.select_box{
  margin:0;
  width:100%;
 font-family:arial;
 position:relative; 
 background-color:#eee; 
}
.select_box > span:after{content:'';width:0; 
  height:0; 
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:10px solid #FD025F;
  position:absolute;
  bottom:-1px;
  z-index:2;
  right:-6px;
transform:rotate(-45deg);
}
.select_box > span{padding:20px;display:block;}
select {
float:left;
height: 56px;
margin: -58px 0 0;
opacity: 0;
width: 100%;
filter: alpha(opacity=0);
}

JavaScript

$( ".select_box" ).change(function() {
  var option = $(this).find('option:selected').val();
  $('.select_box > span').text(option);
});