JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div class="sv_like_container">
    <a href="#" class="sv_like">
        <span class="logo"></span>
        <span class="heart_on"></span>
        <span class="heart_off"></span>
    </a>
    <div class="sv_like_count">100</div>
</div>

CSS

.sv_like_container a.sv_like{
    display:inline-block;
    height:20px;
    min-width:37px;
    position:relative;
    float: left;

    border: 1px solid #444;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset;
    border-bottom-color: #000;
    
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

    
    background-color: #6e6e6e;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6e6e6e), to(#2c2c2c));
    background-image: -webkit-linear-gradient(top, #6e6e6e, #2c2c2c);
    background-image:    -moz-linear-gradient(top, #6e6e6e, #2c2c2c);
    background-image:     -ms-linear-gradient(top, #6e6e6e, #2c2c2c);
    background-image:      -o-linear-gradient(top, #6e6e6e, #2c2c2c);
    background-image:         linear-gradient(to bottom, #6e6e6e, #2c2c2c);
    
    
    -webkit-transition: background 0.3s ease-out; 
       -moz-transition: background 0.3s ease-out; 
        -ms-transition: background 0.3s ease-out; 
         -o-transition: background 0.3s ease-out; 
            transition: background 0.3s ease-out;
}
.sv_like_container a.sv_like:hover{
    
    
  background-color: #7d7d7d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7d7d), to(#404040));
  background-image: -webkit-linear-gradient(top, #7d7d7d, #404040);
  background-image:    -moz-linear-gradient(top, #7d7d7d, #404040);
  background-image:     -ms-linear-gradient(top, #7d7d7d, #404040);
  background-image:      -o-linear-gradient(top, #7d7d7d, #404040);
  background-image:         linear-gradient(to bottom, #7d7d7d, #404040);

}
.sv_like_container a.sv_like:active{
    
  background-color: #404040;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#404040), to(#7d7d7d));
  background-image: -webkit-linear-gradient(top, #404040, #7d7d7d);
  background-image:   ...

JavaScript

$('.sv_like').live('click', function(e){
    e.preventDefault();
    $(this).toggleClass('likes');
});