JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div class="contact">
  <div class="container clearfix">
    <div class="blue-circle">phone</div>
    <div class="blue-circle">email</div>
  </div>
</div>

<div class="menu">
  <div class="container clearfix">
    <div class="logo">
      img
    </div>
    <ul class="right-menu">
      <li>Первый пункт</li>
      <li>Второй пункт</li>
    </ul>
  </div>
</div>

<div class="team">
  <div class="container clearfix">
    <div class="column">a</div>
    <div class="column">b</div>
    <div class="column">c</div>
    <div class="column">d</div>
  </div>
</div>

CSS

body {
	margin: 0;
	padding: 0;
}

p {
	color: red;
}

.container {
	background-color: #eee;
	width: 960px;
	margin: 0 auto;
}

.contact  .blue-circle {
	display: inline-block;
	float: right;
	margin-left: 20px;
}

.clearfix:after {
	content:"";
	display: table;
	clear: both;
}

.contact {
	background-color: #191919;
	min-height: 50px;
}

.menu{
	background-color:#FAFAFA;
	height:70px;
}

.team {
	background-color: #E8E8E8;
	min-height: 70px;
	padding: 20px 0;
}

.logo {
	width: 300px;
	display: inline-block;
	padding: 10px;
}
.right-menu {
	float: right;
}
.right-menu>li{
	display: inline-block;
}

.column {
	display: inline-block;
	width: 225px;
	margin-right: 20px;
	float: left;
	background-color: #F6F6F6;
	height: 100px;
}

.team .column:last-child {
	margin-right: 0;
}