JSFiddle - React, Tailwind, and code Playground

by geirby

HTML

<div class="wrapper">


<div class="header">

<img class="logo" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAEsAAABKCAYAAADzEqlPAAAAfklEQVR42u3QgQAAAAgDsOdPF1EpHGBD2Fz2QmVkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS5YsWbJkyZIlS1bvAeXO0CEi7nfgAAAAAElFTkSuQmCC
" />

<ul class="site-navigation">
  <li ><a>Первый</a></li>
  <li ><a>Второй</a></li>
  <li><a class="right">Третий</a></li>
  <li><a class="right">Четверый</a></li>
</ul>

</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur eos vel, optio doloremque repudiandae corporis cupiditate id at. Facilis, sapiente voluptas obcaecati quis consectetur earum ea ut non neque architecto!
</div>
</div>

CSS

.header {
    /* text-align: center; */
    overflow: hidden;
    
   /*это только для красивого отображения поскольку у header нет контента
    максимальная высота может быть задана в половину диагонали логотипа*/
    height: 100px;
    position: relative;
    /*для показа границы header*/
    border: 1px solid #ccc;
}
.logo {
   transform: rotate(45deg);
    position: absolute;
    top: -38px;
    z-index: 99;
    right: 46.5%;
    border-radius: 7px;
}
/*для того, чтобы растянуть ul я использовал ширину элементов его списка, а сами элементы отцентровал за счет text-align: center; если его убрать, ты увидишь, что не сильно много поменяется*/
.site-navigation {
   display: flex;
    margin: 0px auto;
    /*паддингом ul я регулирую отступы растянутых элементов слева и справа*/
    padding: 0 25px;
    box-sizing: border-box;
    /* text-align: center; */
}

.site-navigation li {
  list-style: none;
  /* background: #cff; */
  width: 100%;
} 

.site-navigation a {
  padding: 10px;
  display: block;
}

.right {
  text-align: right;
}

.site-navigation li:nth-child(2), .site-navigation li:nth-child(3) {
  background: #62d04f;
}

/*оперирую симметричным отступом двух элементов: второго и третьего в списке*/
.site-navigation li:nth-child(2) {
  margin-right: 15%;
}
.site-navigation li:nth-child(3) {
  margin-left: 15%;
}

/*стили для придания жизненности*/
.content {
  background: #ccf;
  padding: 20px;
}