JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>
 <div class="kalesarumis-menu">
 <input type="checkbox" id="menu">
 <label for="menu">Menu</label>
 <div class="zornet_ru_lagen">
 <ul>
 <li><a href="http://zornet.ru/load/80"></a>Мини профиль для uCoz</li>
 <li><a href="#"></a>Скрипты для uCoz</li>
 <li><a href="#"></a>Ajax окна для uCuz</li>
 <li><a href="http://zornet.ru/load/81"></a>Скрипты для uCoz</li>
 <li><a href="http://zornet.ru/load/142"></a>Мини профиль для uCoz</li>
 <li><a href="http://zornet.ru"></a>ZorNet: Создание сайта на uCoz</li>
 </ul>
 </div>
 </div>
 </body>

CSS

.zornet_ru_lagen {
 font-family: 'Oswald', sans-serif; 
 padding: 0 0 0 50px;
}
.kalesarumis-menu {
    background-color: rgb(245, 240, 240);
    padding: 0px 29px;
    border-bottom: 3px solid #659bd2;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.18);
}
.kalesarumis-menu ul {
 list-style-type: none;
 padding: 0;
}
.kalesarumis-menu a {
 display:block;
 padding: 10px;
 text-decoration: none;
}


.kalesarumis-menu label {
 font-family: 'Sedgwick Ave Display', cursive;
 font-size: 56px;
 display: block;
 cursor: pointer;
 background: url(https://image.prntscr.com/image/9qn5eRpZTnCWt3WiN2Qt_g.png) no-repeat left center;
 padding: 10px 0 10px 50px;
}
input#menu {
 display: none;
}

.zornet_ru_lagen {
 max-height: 0;
 overflow: hidden;
 font-family: 'Oswald', sans-serif; 
 padding: 0 0 0 50px;
}
/* Эффект переключения*/
input:checked ~ label {
 background-image: url(https://image.prntscr.com/image/rVseZtO6SWSYryj61SD38Q.png);
}
input:checked ~ .zornet_ru_lagen {
 max-height: 100%;
}