JSFiddle - React, Tailwind, and code Playground

by Maarten Veridjt

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="check-icon">
   <label>
       <input type="checkbox" value="1"></input>
       <span>
           <i class="fa fa-heart"></i>
       </span>
   </label>
</div>

CSS

#check-icon {
    margin: 4px;
    overflow: auto;
    float: left;
}

#check-icon label {
    position: absolute;
    width: 2em;
}

#check-icon label input {
    display: none;
}

#check-icon label span {
    text-align: center;
    display: block;
}

#check-icon label span i {
    transition-duration: 500ms;
}

#check-icon:hover span {
    color: #800000;
}

#check-icon:hover span i {
    text-shadow: 0px 0px 5px #800000;
}

#check-icon span i {
    text-shadow: 0px 0px 0px #800000;
}

#check-icon label input {
    position: absolute;
    top: -20px;
}

#check-icon input:checked + span {
    color: #A00000 ;
}

#check-icon input:checked + span i {
    text-shadow: 0px 0px 10px #C00000;
}

#check-icon:hover input:checked + span {
    color: #800000;
}

#check-icon:hover input:checked + span i {
    text-shadow: 0px 0px 10px #800000;
}