JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<nav>
    <button class="kilposantun"></button>
    <span></span>
    <ul>
      <li>ZORNET.TU</li>
      <li>СКРИПТЫ</li>
      <li>ШАБЛОНЫ</li>
      <li>ДИЗАЙН САЙТА</li>
    </ul>
  </nav>
  <article>
    <img src="http://progames.interzet.ru/uploads/posts/2010-09/1283851710_wallpaper_battlefield_bad_company_2_02_1600.jpg" alt="" />
    <h1>ZORNET.RU</h1>
    <p>ZorNet: Создание сайта на uCoz <a href="#">ZORNET.RU</a> Но прежде чем поделиться хорошими новостями, я не буду сулить.</p>
    <p>В течение нескольких месяцев энтузиастская компьютерная индустрия эффективно удерживалась в заложниках криптовалютным рынком. Спрос на шахтеров-гигантов взлетел до таких крайностей, что стало невозможным рекомендовать создание ПК. Это было не просто теоретическое; Я запустил своего друга-друга.</p>
  </article>

CSS

*{margin:0;padding:0;border:0;outline:0;}
body,html{height:100%;}
body{
  width:100%;
  background:#f1e5e1;
  font-family: 'Lato', sans-serif;
  color: #1b252d;
}

.kilposantun {
    position: absolute;
    top: 19px;
    right: 19px;
    margin-right: 21px;
    width: 49px;
    height: 49px;
    border-radius: 73%;
    background: #0e3c58;
    opacity: 0.95;
    transform: translatez(0px);
    transition: transform .5s cubic-bezier(0.4, 0, 0.15, 0.88);
    visibility: visible;
    cursor: pointer;
    z-index: 0;
}
.kilposantun:focus{
  transform:scale(100) translatez(0px);
  cursor:default;
}
/**** BURGER ****/
button + span {
  position: absolute;
  top:34px; right:45px;
  width: 20px; height: 2px;
  padding:10px;
  background-clip:content-box;
  background-color: #f2f2fb;
  pointer-events:none;
  transition: background-color .4s ease-in-out;
  visibility:visible;
  cursor:pointer;
}
button + span:before, button + span:after {
  position: absolute;
  background: #fff;
  content: '';
  width: 19px;
  height: 2px;
  transition: transform .4s ease-in-out;
}
button + span:before {
  top: 2px;
}
button + span:after {
  bottom: 2px;
}

button:focus + span {
  background-color: transparent;
  pointer-events:auto;
}
button:focus + span:before {
  transform: rotate(44deg) translate(5px, 6px);
}
button:focus + span:after {
  transform: rotate(-44deg) translate(5px, -6px);
}


/**** MENU ****/
nav{
  position:fixed;
  display:table;
  width:inherit; height:inherit;
  top:inherit; left:inherit;
  background:green;
  overflow:hidden;
  visibility:hidden;
}
ul{
  position:relative;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
li{
  list-style-type:none;
  font-size:2em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.7);
  margin:1em;
  opacity:0;
  cursor:pointer;
  transition:opacity .8s, color .2s;
}
button:focus ~ ul li:hover{
  color:rgba(255,255,255,1);
}
button:focus ~ ul li{
  visibility:visible;
  opacity: 0.7;
}

/**** CONTENT...