JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<nav class="vukasgetulpon">
    <a class="first" href="#">ZORNET.RU</a>
    <a href="#">ZORNET.RU</a>

    <nav class="zornetukodsa">
      <input type="checkbox" class="terdsaxemik" id="accordion-1" name="accordion-1">
      <label for="accordion-1" class="gsazemipolan">ZORNET.RU</label>
      <div class="tukolopas">
        <a href="#">Скрипты для uCoz</a>
        <a href="#">Шаблоны для uCoz</a>
        <a class="last" href="#">Ajax окна для uCuz</a>
      </div>
    </nav>

    <nav class="zornetukodsa">
      <input type="checkbox" class="terdsaxemik" id="accordion-2" name="accordion-2">
      <label for="accordion-2" class="gsazemipolan">ZORNET.RU</label>
      
      <div class="tukolopas">
        <a href="#">Создание сайта uCoz</a>
        <a href="#">Создание сайта uCoz</a>
        <a href="#">Создание сайта uCoz</a>
        <a href="#">Создание сайта uCoz</a>
        <a href="#">Создание сайта uCoz</a>
        <a class="last" href="#">ZORNET.RU</a>
      </div>
    </nav>
    <a href="#">ZORNET.RU</a>
    <a class="last" href="#">ZORNET.RU</a>
  </nav>

CSS

body {
  background: #292d33;
  font: 12px/20px Arial;
  padding: 20px;
  color: #ccc;
}

p {
  margin: 0 0 5px;
}

a, label {
  text-decoration: none;
  color: #f3efef;
  font-weight: bold;
}

a:hover {
  color: #e4d9d9;
}

.vukasgetulpon a {
  display: block;
  padding: 10px 15px;
}

.tukolopas a {
  min-width: 90px;
}

.zornetukodsa {
  display: block;
}

.gsazemipolan {
  cursor: pointer;
}

.gsazemipolan {
  display:block;
  padding: 10px 15px;
}

.terdsaxemik {
  display: none;

  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 40px;
  margin: 0 0 0 -15px;
  opacity: 0;
}

/* Skin */

.vukasgetulpon a, .zornetukodsa {
  background: #3d6d99;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4a89c3), color-stop(100%,#376d9e));
    background: -moz-linear-gradient(top, #4a8dcc 0%, #376d9e 100%);
}

.vukasgetulpon a:hover, .zornetukodsa:hover {
  background: #4d5a6b;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#475265), color-stop(100%,#313a46));
  background: -moz-linear-gradient(top, #414c5d 0%, #2e3642 100%);
}

.tukolopas a {
  background: #272525;
}

.tukolopas a:hover {
  background: #151414;
}


.vukasgetulpon  {
  background: #43719a;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c8fcc), color-stop(100%,#4779a7));
  background: -moz-linear-gradient(top, #5796d0 0%, #42709a 100%);
}

:checked ~ .gsazemipolan {
  background: #434e61;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a4250), color-stop(100%,#2d343e));
  background: -moz-linear-gradient(top, #3a4352 0%, #2f3742 100%);
}

.tukolopas {
  max-height: 0;
  overflow: hidden;
}

.tukolopas a {
  background: #222;
}

.terdsaxemik:checked ~ .tukolopas {
  max-height: 200px;
}

.tukolopas, .vukasgetulpon a, .zornetukodsa {
  -webkit-transform: translateZ(0);  
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all...