JSFiddle - React, Tailwind, and code Playground

by konstantinskiy

HTML

<div class="filter-wrap">
		<div class="wrapper">
			<div class="filter-col">
				<select name="" id="">
					<option value="">Сортировка</option>
					<option value="">Сортировка</option>
					<option value="">Сортировка</option>
					<option value="">Сортировка</option>
				</select>
			</div>
			<div class="filter-col">
				<select name="filter-cat">
					<option value="">Категории</option>
					<option value="">Категория1</option>
					<option value="">Категория2</option>
					<option value="">Категория3</option>
				</select>
			</div>
			<div class="filter-col">
				<select name="filter-location">
					<option value="">Расположение</option>
					<option value="">Киев</option>
					<option value="">Харьков</option>
					<option value="">Москва</option>
				</select>
			</div>
			<div class="filter-col">
				<select name="filter-raiting">
					<option value="">Рейтинг</option>
					<option value="">10 баллов</option>
					<option value="">9 баллов</option>
					<option value="">8 баллов</option>
				</select>
			</div>
			<div class="filter-col">
				<select name="filter-price">
					<option value="">Цена</option>
					<option value="">100</option>
					<option value="">200</option>
				</select>
			</div>			
		</div>
	</div>

CSS

.filter-wrap{
	background: #fff;
	padding: 15px 0;
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:    1px 1px 1px 0px rgba(0, 0, 0, 0.1);
	box-shadow:         1px 1px 1px 0px rgba(0, 0, 0, 0.1);
	text-align: center;
	position: relative;
	z-index: 1;
    width: 1000px;
}
.filter-col{
	display: inline-block;
	margin: 0 15px;
	width: 140px;
}
.filter-col select{
	width: 100%;
	padding: 0 15px 0 0;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 0.01px; 
	text-overflow: '';
	-ms-appearance: none;
	appearance: none!important;
    background-image: url(http://foodservice.freelancerblog.ru/images/i/sort-bottom-arrow.png);
    background-position: right center;
    background-repeat: no-repeat;
	color: #8d8d8d;
	font-size: 18px;
	line-height: 1;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    text-align: right;
}