JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating">
		<div class="star-rating" title="153 votes"><a href="#" id="star-1-full"><span class="star star-full"></span></a><a href="#" id="star-2-full"><span class="star star-full"></span></a><a href="#" id="star-3-full"><span class="star star-full"></span></a><a href="#" id="star-4-full"><span class="star star-half"></span></a><a href="#" id="star-5-half"><span class="star star-empty"></span></a><p>153 votes</p></div>	</div>

CSS

@font-face{
    font-family:dashicons;
    src:url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.eot) format('eot'),
	url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.woff) format('woff'),
	url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.ttf) format('truetype'),
	url(http://cdn.lukej.me/dashicons/0.1.0/fonts/dashicons.svg) format('svg');
    font-weight:400;font-style:normal;
}

.star-rating .star-empty:before {
  content: "\f154";
}

.star-rating .star-full:before {
  content: "\f155";
}

.star-rating .star-half:before {
  content: "\f459";
}

a, a:visited{
    text-decoration: none;
}
.star-rating .star {
  color: #FECB30;
  display: inline-block;
  font-family: dashicons;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  height: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: inherit;
  vertical-align: top;
  width: 16px;
}

JavaScript

$(document).ready(function () {
    $(document).on('mouseenter', '[id^=star-]', function () {
        $('[id^=star-]').html('<span class="star star-empty"></span>');
    }).on('mouseleave', '[id^=star-]', function () {
         $('[id^=star-]').html('<span class="star star-full"></span>');
    });
});