JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<header class="header">

      <div class="container">
         <div class="row">
            <div class="col-lg-1">
               <img src="img/logo.png" alt="logo" class="header__logo">
            </div>
            <div class="col-lg-10">
               <nav class="header__menu">
                  <ul class="header__list">
                     <li class="header__item"><a href="header__link">Главная</a></li>
                     <li class="header__item"><a href="header__link">Программа занятий</a></li>
                     <li class="header__item"><a href="header__link">Документы</a></li>
                     <li class="header__item"><a href="header__link">Особенности садика</a></li>
                     <li class="header__item"><a href="header__link">Контакты</a></li>
                  </ul>
               </nav>
            </div>
         </div>
      </div>
   </header>

CSS

html, body{
   height: 100%;
}

.header{
   padding-top: 21px;
   // background: url(/img/oblako-header.png) repeat;
   font-family: sans-serif;
}
.container{
   max-width: 1170px;
   width: 100%;
   margin: 0 auto;
}

.header__list{
    display: flex;
   align-items: center;
}
.header__item{
   margin-right: 20px;
}
.header__item:last-child{
   margin-right: 0px;
}
.header__item:first-child{
   margin-left: 30px;
}
.header__link{
   color:#5894b5;
   font-size: 27px;
}
.header__link::before:hover{
   color:#f7986b;
}