JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapp">
  <input type="checkbox" id="toggle" />
    <div class="hidden_menu">
        <ul>
            <li><a href="/">Первый пункт</a></li>
            <li><a href="/">Второй пункт</a></li>
            <li><a href="/">Третий пункт</a></li>
            <li><a href="/">Четвертый пункт</a></li>
            <li><a href="/">Пятый пункт</a></li>
            <li><a href="/">Шестой пункт</a></li>
            <li><a href="/">Седьмой пункт</a></li>
        </ul>
    </div>
  <label for="toggle">Кликни на меня</label>
</div>

CSS

@import "http://webfonts.ru/import/anonym.css";
/*
	Anonymous Pro, 400, 400 italic, 700, 700 italic
*/
* {
    padding: 0;
    margin: 0;
}
body {
    width: 100%;
    height: 100%;
    background: #313130;
    overflow: hidden;
    font: 700 22px/26px 'Anonymous Pro';
}
ul {
    padding-left: 10px;
    list-style-type: none;
}

.wrapp {
    position: relative;
}
#toggle {
    display: none;
}
.wrapp label {
    color: white;
    text-align: center;
    border: 2px solid white;
    border-radius: 4px;
    display: block;
    padding: 10px 20px;
    position: absolute;
    left: 30%;
    top: 10px;
    cursor: pointer;
    transition: all 410ms;
}
.wrapp label:hover {
    background: #fff;
    color: #313130;
}
#toggle:checked ~ .hidden_menu {transform: translateX(242px);}

.hidden_menu {
    position: absolute;
    width: 240px;
    top: 10px;
    left: -240px;
    padding: 20px;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    transition: all 410ms ease-in;
    box-sizing: border-box;
}
.hidden_menu li a {
    color: #fff;
    text-decoration: none;
}
.hidden_menu li a:hover {
    color: #91928f;
}