JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<ul class="menu">
    <li><a href=""><span class="title">Дизайн</span><span class="counter">154</span></a></li>
    <li><a href=""><span class="title">Программирование</span><span class="counter">19</span></a></li>
    <li><a href=""><span class="title">Motion - дизайн</span><span class="counter">75</span></a></li>
    <li><a href=""><span class="title">Flat Design</span><span class="counter">33</span></a></li>
</ul>

CSS

body {
    padding: 0px;
    margin: 0px;
    
    font-family: "Arial", sans-serif;
}
a, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

/* MENU */
.menu {
    width: 300px;
    padding: 0px;
    
    background-color: #34495e;
    border-right: 1px solid #2c3e50;
    list-style: none;
    
    font-size: 14px;
    color: #CFCFCF;
}
.menu li a {
    display: block;
    padding: 15px 20px;
}
.menu li:nth-child(2n) {
    background-color: rgba(255,255,255,.08);
}

.menu li a .title {
    -webkit-transition: padding-left 0.3s ease, color 0.3s ease;
       -moz-transition: padding-left 0.3s ease, color 0.3s ease;
        -ms-transition: padding-left 0.3s ease, color 0.3s ease;
         -o-transition: padding-left 0.3s ease, color 0.3s ease;
            transition: padding-left 0.3s ease, color 0.3s ease;
}
.menu li a:hover .title{
    padding-left: 10px;
    color: #FFFFFF;
}

.menu li a .counter {
    float: right;
    color: #9CA3B0;
}
/* END-MENU*/