JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="sidebar"> <span id="plus"></span>

<ul>
    <li>Соднржимое</li>
    <li>Соднржимое</li>
    <li>Соднржимое</li>
    <li>Соднржимое</li>
</ul>

CSS

input {
    position:fixed;
    right:50px;
    z-index: 1;
    margin: 0;
    padding: 0;
    height: 32px;
    width: 30px;
    background: #eee;
    cursor: pointer;
    opacity:0;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
}
#plus {
    position:fixed;
    right:50px;
    width:30px;
    height:30px;
    background: #eee url(b_minus.png);
    border:1px solid red;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
}
ul {
    position: fixed;
    right:0px;
    width:0px;
    background:rgba(232, 67, 46, 0.45);
    border:1px solid red;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    -o-transition: all 0.7s;
    -ms-transition: all 0.7s;
    transition: all 0.7s;
}
input:checked {
    right:260px;
}
input:checked + #plus {
    right:260px;
}
input:checked ~ ul {
    width:210px;
}