JSFiddle - React, Tailwind, and code Playground

by katerina5452

HTML

<a class="main-navigation__link--logo " href="index.html">
      <img class="main-navigation__logo" src="img/logopng.png" width="140" height="72" alt="Logo of Sedona">
    </a>

    <nav class="main-navigation">

      <ul class="main-navigation__list">
        <li class="main-navigation__item "><a class="main-navigation__link " href="info.html">Информация</a></li>
        <li class="main-navigation__item "><a class="main-navigation__link " href="photo.html">Фото и Видео</a></li>
        <li class="main-navigation__item "><a class="main-navigation__link " href="map.html">Карта штата</a></li>
        <li class="main-navigation__item "><a class="main-navigation__link " href="inner.html">Гостиницы</a></li>
      </ul>

    </nav>

CSS

a {
    text-decoration: none;
    
  }

  .main-navigation__link--logo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

  .main-navigation {
      font-size: 14px;
      line-height: 26px;
      font-weight: bold;
      color: #000000;
     
      position: absolute;
      padding: 0;
      margin: 0;
     
             
}

.main-navigation__list {
    list-style: none; 
    height: 50px;
    padding: 0;
    width: 1200px;
    
    
}

.main-navigation__list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}

.main-navigation__item:nth-child(2) {
    margin-right: 100px;
}
.main-navigation__item:nth-child(3) {
    margin-left: 100px;
}
.main-navigation__item:nth-child(n+2) {
    display: flex;
    justify-content: flex-end;
}
.main-navigation__item:nth-child(-n+2) {
    display: flex;
    justify-content: flex-start;
}
.main-navigation__item:nth-child(4) {
    margin-right: 70px;
}
.main-navigation__item:nth-child(1) {
    margin-left: 70px;
}

.main-navigation__item {
    width: 250px;
    height: 50px;
}
.main-navigation__link--logo {
  display: flex;
  justify-content: center;
 }
.main-header {
   height: 50px;
   margin: 0;
   padding: 0; 
   
}