JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<div id="block1">
            <label>Select State</label>
            <div class="styled-select green rounded" style="width: 100%; margin-bottom: 2vw;">
                <select class="dropdown-toggle" ng-model="selectedState"
                        ng-options="item for item in states | orderBy:'toString()'"
                        ng-change="stateChanged(selectedState)">
                    <option>State</option>
                </select>
            </div>
        </div>

        <div id="block2" ng-show="showSecondDropDown">
            <label>Select County</label>
            <div class="styled-select green rounded" style="width: 100%">
                <select ng-model="selectedCounty"
                        ng-options="arr.countyName for arr in countyList | orderBy:'countyName' track by arr.countyId "
                        ng-change="tp(selectedCounty)">
                </select>
            </div>
        </div>

CSS

.styled-select {
    background:
            url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
    height: 29px;
    overflow: hidden;
    width: 240px;
}

.rounded {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}
.green   { background-color: #779126; }

.styled-select select {
    background: transparent;
    border: none;
    font-size: 14px;
    height: 29px;
    padding: 5px;
    width: 268px;
}
#block1, #block2{
    float: left;
}