JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Лабораторна нумер 2</title>
</head>
<body>
<div id="header">
<div class="content">
<div id="logo">
<img src="images/logo.png" alt="">
<p>Good Inc.</p>
</div>
<div id="time">
<select name="time" id="2">
<option value="1">Contact</option>
</select>
<div class="icon"></div>
<div class="drop-btn">
<div class="icon"></div>
</div>
</div>
<div id="location">
<select name="location" id="1">
<option value="1">Newsletter</option>
</select>
<div class="icon"></div>
<div class="drop-btn">
<div class="icon"></div>
</div>
</div>
<div class="clear-fix"></div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.clear-fix {
clear: both;
}
#header {
height: 67px;
width: 100%;
background: #373737;
}
#header .content {
width: 940px;
margin: 0 auto;
background: #373737;
height: inherit;
}
#logo {
float: left;
font-family: "Nexa Light";
color: white;
line-height: 30px;
}
#logo img {
float: left;
}
#logo p {
float: left;
margin-top: 18px;
margin-left: 10px;
}
#location, #time {
height: 36px;
width: 179px;
background: white;
position: relative;
float: right;
margin-top: 14px;
margin-left: 20px;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.5);
}
#location select, #time select {
height: inherit;
width: inherit;
padding-left: 40px;
color: #959595;
font-family: "Nexa Bold";
font-size: 12px;
}
#location>.icon, #time>.icon {
height: 17px;
width: 11px;
position: absolute;
top: 9px;
left: 16px;
background-image: url("images/icons.png");
background-position: -1px -1px;
pointer-events: none;
}
#location .drop-btn, #time .drop-btn {
height: 34px;
width: 35px;
background: #ebebeb;
position: absolute;
top: 1px;
right: 0;
border-left: 1px solid #d8d8d8;
pointer-events: none;
}
.drop-btn>.icon {
width: 8px;
height: 14px;
background-image: url("images/icons.png");
background-position: -14px -1px;
position: absolute;
top: 11px;
right: 14px;
}