JSFiddle - React, Tailwind, and code Playground

by tanya_22

HTML

<article class="main-header container">
        <a href="#" class="item">
          <div class="logo-name">
            <img src="img/icon-logo.png" width="33" height="38" alt="logo" />
            <h3>АвтоТрансГрупп</h3>
            <span>транспортная компания</span>
          </div>
        </a>
        <div class="item joke">
          <p>
            Перевозим <span class="orange">без</span> лишних
            <span class="big">хлопот!</span>
          </p>
        </div>
        <div class="item adress">
          <p>
            127534, г. Москва,<br>
            ул. Сущевский Вал, дом 2, офис 3
          </p>
        </div>
        <div class="item call-back">
          <p>
            8(965) <span>422-63-13</span>
          </p>
          <a href="#">Обратный звонок</a>
        </div>
      </article>

CSS

.container{
  width: 960px;
  margin: 0 auto;
}
.main-header{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 25px auto 17px;
}
.item:first-child{
  margin-left: 8px;
}
.item{
  width: 210px;
  margin-left: 23px;
  text-align: center;
}
.logo-name img{
  display: block;
  position: absolute;
  top: 25px;
  left: 150px;
}
.logo-name h3,
.logo-name span{
  line-height: 20px;
  text-align: right;
}
.logo-name h3{
  font-size: 22px;
  font-weight: normal;
}
.logo-name span{
  display: block;
  font-size: 10px;
}
.joke p{
  font-size: 18px;
  line-height: 18px;
  color: #344970;
}
.orange{
  color: #f26101;
}
.joke .big{
  font-size: 20px;
}
.adress p{
  font-size: 13px;
  line-height: 20px;
  color: #7c7c7c;
}
.call-back p{
  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  color: #363636;
}
.call-back span{
  color: #304269;
}
.call-back a{
  font-size: 13px;
  color: #595959;
  border-bottom: 1px dotted #a4a4a4;
}