JSFiddle - React, Tailwind, and code Playground

by paulftw

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<span class="fa-stack fa-lg">
  <i class="fa fa-star fa-stack-1x"></i>
  <i class="fa fa-star-o fa-stack-1x"></i>
</span>

CSS

.fa-stack i:nth-child(1) {
  opacity: 0;
}

.fa-stack:hover i:nth-child(2) {
  opacity: 1;
}
.fa-stack:hover i:nth-child(1) {
  opacity: 1;
}

i {
  transition: 500ms all;
}


.fa-star {
  color: #f1f;
}

.fa-lg {
  font-size: 200px;
}