JSFiddle - React, Tailwind, and code Playground

HTML

<span class="tw-heart-box">
  <input type="checkbox" name="name" value="">
  <span class="tw-heart"></span>
</span>
<span class="tw-heart-box">
  <input type="checkbox" name="name" value="">
  <span class="tw-heart"></span>
</span>
<span class="tw-heart-box">
  <input type="checkbox" name="name" value="">
  <span class="tw-heart"></span>
</span>
<span class="tw-heart-box">
  <input type="checkbox" name="name" value="">
  <span class="tw-heart"></span>
</span>
<span class="tw-heart-box">
  <input type="checkbox" name="name" value="">
  <span class="tw-heart"></span>
</span>

CSS

.tw-heart-box {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.tw-heart {
  background: url(http://i.imgur.com/zw8ahUb.png) no-repeat 0 0;
  display: inline-block;
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0;
  top: 0;
}

[type="checkbox"]:checked + .tw-heart {
  transition: background .8s steps(28);
  background-position: -2800px 0;
}

[type="checkbox"] {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}