JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background-color:pink;height:150px; text-align:center;">
    <br/>
    <div class="select_join" style="margin-left:15px">
        <select name="txtCountry">
            <option>-- Select Country --</option>
            <option value="1">Abkhazia</option>
            <option value="2">Afghanistan</option>
        </select>
    </div>
</div>

CSS

select option{
    font-size: 13pt;
}

select option:first-child {
    font-size: 7pt;
}



.select_join {
    width: 170px;
    height: 28px;
    overflow: hidden;
    background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
    border: #FEFEFE 1px solid;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
    box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
    background: transparent;
    width: 170px;
    font-size:7pt;
    color:grey;
    border: 0;
    border-radius: 0;
    height: 28px;
    -webkit-appearance: none;
}
.select_join select:focus {
    outline: none;
}