JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="sides/tauchen.html">Tauchen</a></li>
    <li><a href="sides/ocean.html">Ocean</a></li>
    <li><a href="sides/aboutme.html">About me</a></li>
    <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a></li>
  </ul>
</nav>

CSS

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
nav {
  overflow:hidden;
  background-image:url(//www.html.de/attachments/menubg2-png.4594/);
  background-repeat:repeat-x;
  background-color:#000;
  width:100%;
  height:48px;
  padding:10px;
  position:relative;
  color:#ddf;
}
nav::before,nav::after {
  display:block;
  content:"";
  background-repeat:no-repeat;
  width:10px;
  height:48px;
  position:absolute;
  top:0;
}
nav::before {
  background-image:url(//www.html.de/attachments/menubg1-png.4593/);
  left:0;
}
nav::after {
  background-image:url(//www.html.de/attachments/menubg3-png.4595/);
  right:0;
  z-index:2;
}
ul {
  list-style:none;
  display:flex;
}
li {
  flex:1;
  text-align:center;
}
@media (max-width:379px) {
  nav {
    height:100%;
    min-height:48px;
    overflow:visible;
    background-color:#000;
  }
  ul {
    flex-direction:column;   
  }