JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="zaresatukolpan">
      <input type="radio" name="menu" id="one" class="menu-one" checked>
      <label for="one"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/home.gif" alt=""/></i><span>Главная</span></label>
      
      <!--Item 2-->
      <input type="radio" name="menu" id="two" class="menu-two">
      <label for="two"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/about.gif" alt=""/></i><span>Профиль</span></label>
      
      <!--Item 3-->
      <input type="radio" name="menu" id="three" class="menu-three">
      <label for="three"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/folio.gif" alt=""/></i><span>Мода</span></label>
      
      <!--Item 4-->
      <input type="radio" name="menu" id="four" class="menu-four">
      <label for="four"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/blog.gif" alt=""/></i><span>Статьй</span></label>   
      
      <!--Item 5-->
      <input type="radio" name="menu" id="five" class="menu-five">
      <label for="five"><i><img src="https://raw.githubusercontent.com/abenjamin765/slidemenu/gh-pages/img/contact.gif" alt=""/></i><span>Связь</span></label>
      
      <!--Slider Bar-->
      <div class="slider">
        <div class="bar"></div>
      </div>
      <!--Slider Bar End-->
</div>

CSS

body {
  font: 400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*slidemenu */
.zaresatukolpan {
    width:48%;
    margin:0 auto
}

.zaresatukolpan:after {
    content:"";
    display:table;
    clear:both
}

.zaresatukolpan label {
    width:19%;
    float:left;
    box-sizing:border-box;
    text-align:center;
    padding:17px;
    opacity:.7;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    font-size:13px;
    font-weight:600
}

.zaresatukolpan label i {
    height:37px;
    width:37px;
    display:block;
    margin:0 auto 9px
}

.zaresatukolpan label:hover {
    cursor:pointer;
    opacity:.8
}

.zaresatukolpan .slider {
    background:#bbbaba;
    height:6px;
    border-radius:6px;
    clear:both
}

.zaresatukolpan .slider .bar {
    background:#333;
    height:6px;
    width:19.9%;
    border-radius:7px;
    margin-left:0;
    -webkit-transition:all .15s ease-in-out;
    -moz-transition:all .15s ease-in-out;
    transition:all .15s ease-in-out
}

.zaresatukolpan input[type="radio"] {
    display:none
}

.zaresatukolpan .menu-one:checked ~ .slider .bar {
    margin-left:0
}

.zaresatukolpan .menu-two:checked ~ .slider .bar {
    margin-left:19.9%
}

.zaresatukolpan .menu-three:checked ~ .slider .bar {
    margin-left:39%
}

.zaresatukolpan .menu-four:checked ~ .slider .bar {
    margin-left:59.8%
}

.zaresatukolpan .menu-five:checked ~ .slider .bar {
    margin-left:79.9%
}

.zaresatukolpan .menu-one:checked + label {
    opacity:1
}

.zaresatukolpan .menu-two:checked + label {
    opacity:1
}

.zaresatukolpan .menu-three:checked + label {
    opacity:1
}

.zaresatukolpan .menu-four:checked + label {
    opacity:1
}

.zaresatukolpan .menu-five:checked + label {
    opacity:1
}

@media screen and (max-width: 780px) {
.zaresatukolpan {
    width:90%
}
}

@media screen and (max-width: 780px) and (max-width: 500px) {
.zaresatukolpan label span {
    display:none
}
}

@media...