JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<header class="zotrdsabykam">
	<label for="nav-toggle" class="siklopbmrug"></label>
</header>
<input type="checkbox" id="nav-toggle" class="nav-toggle">	
<ul id="gaserkivsamik">
	<li class="nav-item"><a href="#">Главная</a></li>
	<li class="hide">•</li>
	<li class="nav-item"><a href="#">Скрипты</a></li>
	<li class="hide">•</li>
	<li class="nav-item"><a href="#">Шаблоны</a></li>
	<li class="hide">•</li>
	<li class="nav-item"><a href="#">Дизайн</a></li>
</ul>

CSS

body {
  min-width: 317px;
  margin: 3% 0 3% 0;
  padding: 0;

  background-color: #f5f0ef;

  font-family: 'Lato', sans-serif;
  font-size: 1em;
  color: #776055;
}


a {
  text-decoration: none;
  color: #794841;
}





ul#gaserkivsamik {
  margin: 0 auto;
  padding: 10px 0;

  list-style-type: none;

  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
  text-align: center;
  text-transform: uppercase;
}

ul#gaserkivsamik li {
  display: inline;

  margin: 0;
}

ul#gaserkivsamik li a {
    display: inline-block;
    margin-right: 9px;
    margin-left: 9px;
    padding: 3px 9px;
    text-decoration: none;
}

.nav-toggle {
  display: none;
}

@media screen and (max-width: 800px) {
  body {
    margin: 0;
  }
  #post-body {
    margin: 5%;
  }
  .zotrdsabykam {
    box-sizing: border-box;
    width: 100%;
    padding: 12px;

    background-color: #523834;

    table-layout: fixed;
  }
  ul#gaserkivsamik {
    display: none;

    width: 100%;
    margin: 0;
    padding: 0;

    background-color: #804841;

    table-layout: fixed;

    transition: all .3s ease-in;
  }
 ul#gaserkivsamik li {
    display: block;
    border-bottom: 1px solid #84605c;
    line-height: 3;
    color: #f9f6f6;
}
  #gaserkivsamik li a {
    color: white;
  }
  ul#gaserkivsamik li.hide {
    display: none !important;
  }
  #gaserkivsamik li:hover {
border-bottom: 1px solid #98371b;
    background-color: #712611;
  }
  /****TOGGLE****/
  .siklopbmrug:before {
    color: white;
cursor:pointer;
    content: '☰';
  }
  .nav-toggle:checked + ul#gaserkivsamik {
    display: table;

    margin-left: 0;
  }
}