JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="container">
<!-- Этот чекбокс даст нам поведение переключателя, он будет скрыт, но работать -->
<input id="toggle" type="checkbox">

<!-- ВАЖНО: любой элемент, который мы хотим модифицировать при изменении состояния чекбокса, является «братским» элементом для чекбокса -->

<!-- Эта метка привязана к чекбоксу и будет содержать переключение «кнопок» -->
<label class="toggle-container" for="toggle">
<!-- Если меню открыто, то здесь будет иконка «X», в противном случае просто иконка гамбургера -->
<span class="button button-toggle"></span>
</label>

<!-- Навигация -->
<nav class="nav">
<a rel="nofollow" rel="noreferrer" class="nav-item" href="">Управление ZORNET.RU</a>
<a rel="nofollow" rel="noreferrer" class="nav-item" href="">История ZORNET.RU</a>
<a rel="nofollow" rel="noreferrer" class="nav-item" href="">Статистика ZORNET.RU</a>
<a rel="nofollow" rel="noreferrer" class="nav-item" href="">Настройки ZORNET.RU</a>
</nav>

<!-- Просто фиктивное содержимое, как в анимированном gif -->
<section class="dummy-content">
<div class="circle"></div>
<div class="text">
<span></span><span></span>
</div>
<div class="square-top"></div>
<div class="square-behind"></div>
</section>
</div>

CSS

/* Базовые стили */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

body {
  font-family: sans-serif;
  background-color: #F6C390;
}

a {
  text-decoration: none;
}

.container {
  position: relative;
  margin: 35px auto 0;
  width: 300px;
  height: 534px;
  background-color: #533557;
  overflow: hidden;
}

/* Работа переключателя */
#toggle {
  position: absolute;
  left: -100%;
  top: -100%;
}

#toggle:focus ~ .toggle-container .button-toggle {
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}

#toggle:checked ~ .toggle-container .button-toggle {
  box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
#toggle:checked ~ .toggle-container .button-toggle:hover {
  box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
#toggle:checked ~ .toggle-container .button-toggle:before {
  transform: translateY(-50%) rotate(45deg) scale(1);
}
#toggle:checked ~ .toggle-container .button-toggle:after {
  transform: translateY(-50%) rotate(-45deg) scale(1);
}
#toggle:checked:focus ~ .toggle-container .button-toggle {
  box-shadow: 0 0 0 550px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1), 0 0 0 8px rgba(0, 0, 0, 0.1), inset 0 0 0 20px rgba(0, 0, 0, 0.1);
}
#toggle:checked ~ .nav {
  margin-bottom: 100px;
  pointer-events: auto;
  transform: translate(50px, 50px);
}
#toggle:checked ~ .nav .nav-item {
  color: #EC7263;
  letter-spacing: 0;
  height: 40px;
  line-height: 40px;
  margin-top: 0;
  opacity: 1;
  transform: scaleY(1);
  transition: 0.5s, opacity 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(1) {
  transition-delay: 0.15s;
}
#toggle:checked ~ .nav .nav-item:nth-child(1):before {
  transition-delay: 0.15s;
}
#toggle:checked ~ .nav .nav-item:nth-child(2) {
  transition-delay: 0.1s;
}
#toggle:checked ~ .nav .nav-item:nth-child(2):before {
  transition-delay: 0.1s;
}
#toggle:checked ~ .nav...