JSFiddle - React, Tailwind, and code Playground

by Mateusz

HTML

<nav>
  <ul>
    <li><a href="#" class="logo">LOGO</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Oferta</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Panel Klineta</a></li>
  </ul>
</nav>

CSS

*{margin:0;padding:0;box-sizing:border-box;}
a{text-decoration:none;color:#fff;}

nav a, #logo{
  padding:1em;
}

nav {
  background-color: #363A3F;
  margin: 0;
  overflow: hidden;
}
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
nav ul li {
  display: inline-block;
  list-style-type: none;
}
nav ul li a {
  color: white;
  display: block;
  padding: 1em;
  text-decoration: none;
  transition:all 0.3s ease-in-out;
}
nav ul li:first-child {
  margin-right: auto;
}
nav ul li a.logo {
  background-color: #5cb85c;
  width:200px;
  text-align:center;
}
nav ul li a:hover {
  background-color: rgba(0,0,0,0.25);
}

@media (max-width: 680px){
  nav ul{
	display: flex;
	flex-direction: column;
  text-align:center;
  }
  nav ul li:first-child {
    margin-right: 0;
  }
  nav ul li a.logo {
    width:100%;
  }
  
nav ul li:nth-of-type(1) { order: 3; }
nav ul li:nth-of-type(2) { order: 1; }
nav ul li:nth-of-type(3) { order: 2; }
nav ul li:nth-of-type(4) { order: 4; }
nav ul li:nth-of-type(5) { order: 5; }
  
}