JSFiddle - React, Tailwind, and code Playground

by Евгений

HTML

<dl class="star-rating">
  <dt>Рейтинг: 4 из 5 звезд</dt>
  <dd>
    <ol>
      <li><a href="#" class="star1" title="Рейтинг 1 из 5">Ужасно</a></li>
      <li><a href="#" class="star2" title="Рейтинг 2 из 5">Плохо</a></li>
      <li><a href="#" class="star3" title="Рейтинг 3 из 5">Нормально</a></li>
      <li class="current" style="width:80px"><a href="#" class="star4" title="Рейтинг 4 из 5">Хорошо</a></li>
      <li><a href="#" class="star5" title="Рейтинг 5 из 5">Отлично</a></li>
    </ol>
  </dd>
</dl>

<ul class="_rating31 mb30" data-rname="overall">
    <li class="current"><span class="star1" title="Рейтинг 1 из 5" data-rating="1">Плохо</span></li>
    <li><span class="star2" title="Рейтинг 2 из 5" data-rating="2">Неплохо</span></li>
    <li><span class="star3" title="Рейтинг 3 из 5" data-rating="3">Средне</span></li>
    <li><span class="star4" title="Рейтинг 4 из 5" data-rating="4">Хорошо</span></li>
    <li><span class="star5" title="Рейтинг 5 из 5" data-rating="5">Отлично</span></li>
</ul>
<div class="mb30"></div>
<ul class="_rating20 mb30" data-rname="overall">
    <li class="current"><span class="star1" title="Рейтинг 1 из 5" data-rating="1">Плохо</span></li>
    <li><span class="star2" title="Рейтинг 2 из 5" data-rating="2">Неплохо</span></li>
    <li><span class="star3" title="Рейтинг 3 из 5" data-rating="3">Средне</span></li>
    <li><span class="star4" title="Рейтинг 4 из 5" data-rating="4">Хорошо</span></li>
    <li><span class="star5" title="Рейтинг 5 из 5" data-rating="5">Отлично</span></li>
</ul>

CSS

.mb30 {
    margin-bottom: 30px;
}
dl.star-rating ol {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100px;
    height: 20px;
    position: relative;
    background: url(http://beholder-eye.info/example/stars/stars.png);
}
dl.star-rating li {
    float: left;
    margin: 0;
    padding: 0;
}
dl.star-rating li a {
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    position: absolute;
    text-decoration: none;
    z-index: 10;
}
dl.star-rating li a:hover {
    background: url(http://beholder-eye.info/example/stars/stars.png) left center;
    left: 0;
    z-index: 2;
}
dl.star-rating a.star1 {
    left: 0;
}
dl.star-rating a.star1:hover {
    width: 20px;
}
dl.star-rating a.star2 {
    left: 20px;
}
dl.star-rating a.star2:hover {
    width: 40px;
}
        dl.star-rating a.star3 {
                left: 40px;
        } dl.star-rating a.star3:hover {
                width: 60px;
        }
        dl.star-rating a.star4 {
                left: 60px;
        }        dl.star-rating a.star4:hover {
                width: 80px;
        }
        dl.star-rating a.star5 {
                left: 80px;
        } dl.star-rating a.star5:hover {
                width: 100px;
        }
        dl.star-rating li.current {
                background: url(http://beholder-eye.info/example/stars/stars.png) left bottom;
                height: 20px;
                z-index: 1;
        }

        dl.star-rating ol>li a:hover{
                text-indent: 110px;
  }







ul._rating31 {
    padding: 0;
    margin: 0;
  width: 175px;
  height: 31px;
  position: relative;
  background: url(http://traveltipz.ru/images/newd/rating31.png);
  list-style: none; }
  ul._rating31 li {
    float: left;
    height: 31px; }
  ul._rating31 li span {
    display: block;
    width: 35px;
    height: 31px;
    text-indent: -9999px;
    position: absolute;
    text-decoration: none;
    z-index: 10;
    cursor: pointer;
    font-size: 1.64em;
   ...