JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul class="csaretulopsa_logerden">
	<li><a href="#">ZORNET</a></li>
	<li><a href="#">СКРИПТ</a></li>
	<li><a href="#">Шаблон</a></li>
	<li><a href="#">Дизайн</a></li>
	<li><a href="#">ZorNet.Ru</a></li>
</ul>

CSS

.csaretulopsa_logerden{
  list-style: none;
  margin: 0;
  padding: 0;
  font: bold 10px 'Lato', sans-serif; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.csaretulopsa_logerden li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 100px;
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: 7px;
}

.csaretulopsa_logerden li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 69px;
    padding: 0 7px;
    position: relative;
    overflow: hidden;
    color: #f7f1f1;
    outline: none;
    border: 1px solid rgba(21, 20, 20, 0.15);
    border-bottom: 7.8px solid rgba(0,0,0,.1);
    opacity: 1;
    text-transform: uppercase;
    font-size: 1.8em;
    letter-spacing: 0.0555em;
    background: #ec4442;
    text-decoration: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-shadow: 0 1px 0 #1d1c1c;
}

/* Create shimmering effect */
.csaretulopsa_logerden li a:after{
  content: '';
  position: absolute;
  width: 35%;
  height: 100%;
  background: white;
  opacity: .7;
  top: 0;
  left: -49.8%;
  -webkit-transform: skew(-20deg);
          transform: skew(-20deg);
  -webkit-transition: all .3s;
  transition: all .3s;
}


.csaretulopsa_logerden li:nth-of-type(2) a{
  background: #1dbd2a;
}

.csaretulopsa_logerden li:nth-of-type(3) a {
    background: #3086a5;
}

.csaretulopsa_logerden li:nth-of-type(4) a {
    color: #eae3e3;
    background: #5f56a7;
}

.csaretulopsa_logerden li:nth-of-type(5) a {
    background: #bd870d;
}

.csaretulopsa_logerden li a:hover {
    opacity: .8;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.csaretulopsa_logerden li a:hover:after{
  left: 150%;
  -webkit-transition: all .4s;
 ...