JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-select">
    <select name="" id="radiusSelect" multiple>
        <option value="3">3 miles</option>
        <option value="5">5 miles</option>
        <option value="10">10 miles</option>
        <option value="25">25 miles</option>
        <option value="50">50 miles</option>
        <option value="100">100 miles</option>
        <option value="250">250 miles</option>
        <option value="500">500 miles</option>
    </select>
</div>

CSS

.form-select {
    width: 200px;
}

.form-select select {
    width: 100%;
    height: 45px;
    margin: 8px 0;
    border: 0;
    border: 1px solid black;
    border-top: 4px solid black;
    background: #fff url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png') no-repeat;
    background-size: 20px;
    background-position:  right 10px center;
    font-family: 'Arial';
    padding-left: 24px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}