JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<div id="tb_outer">
	<div id="tb_inner">
		<div id="tb_question">
			<span>Did it work ?</span>
		</div>

		<div id="tb_voting">
			<div id="tb_text">
				Works?
				<span>Cast your vote</span>
			</div>

			<div id="tb_vote">
				<div id="tb_vote-no">
					<a href="javascript:;">
						<i class="fa fa-thumbs-o-down"></i><span>128</span>
					</a>
				</div>

				<div id="tb_vote-yes">
					<a href="javascript:;">
						<i class="fa fa-thumbs-o-up"></i><span>637</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);


#tb_inner {
    background: rgba(112, 112, 112, 1);
  background: -webkit-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);
  background: -moz-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);
  background: -o-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);
  background: -ms-linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);
  background: linear-gradient(top, rgba(124, 124, 124, .8) 0%, rgba(112, 112, 112, .9) 50%, rgba(101, 101, 101, .95) 50%);

    font-family: 'Source Sans Pro';
  color: #fefefe;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  margin: auto;
  position: relative;
  overflow: hidden;
  cursor: default;

    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px 5px rgba(200, 200, 200, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 0 1px rgba(255, 255, 255, .35), inset 0 0 0 2px rgba(255, 255, 255, .15), inset 0 0 20px 5px rgba(200, 200, 200, .5), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 1px -1px rgba(0, 0, 0, .2);
}

#tb_question {
  width: 30px;
  height: 112px;
  padding: 4px;
}

#tb_question span {
  display: inline-block;
  position: absolute;
  top: 50px;
  font-size: 18px;
  width: 140px;
  text-align: center;
  text-transform: capitalize;
  font-weight: bold;
  left: -51px;

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#tb_voting {
  display: none;
  padding: 4px;
  width: 64px;
}

#tb_text {
  font-size: 14px;
 ...

JavaScript

// Vote Cast Action
// ->

$("#tb_question").on('mouseenter', function () {
    $.when($(this).fadeOut()).then(function () {
      $("#tb_voting").fadeIn();
    });
});

$("#tb_voting").on('mouseleave', function () {
    $.when($(this).fadeOut()).then(function () {
      $("#tb_question").fadeIn();
    });
});


var like    = $("#tb_vote-yes").find("span").html(),
    dislike = $("#tb_vote-no").find("span").html();

$("#tb_vote-yes, #tb_vote-no").on('click', function () {
  if ($.cookie("tb_like") == null && $.cookie("tb_dislike") == null) {
    $(this).find("a").attr("id", "tb_vote-active");
    $(this).siblings().find("a").attr("id", "tb_vote-disable");

    if ($(this).find("span").html() == like) {
      $(this).find("span").html(parseInt(like) + 1);
      $.cookie("tb_like", "vote", { expires: 30, path: '/' });
    } else {
      $(this).find("span").html(parseInt(dislike) + 1);
      $.cookie("tb_dislike", "vote", { expires: 30, path: '/' });
    }
  }

  return false;
});

if ($.cookie("tb_like") != null) {
  $("#tb_vote-yes")
    .find("a").attr("id", "tb_vote-active")
    .find("span").html(parseInt(like) + 1);

  $("#tb_vote-no")
    .find("a").attr("id", "tb_vote-disable");
}
else if ($.cookie("tb_dislike") != null) {
  $("#tb_vote-no")
    .find("a").attr("id", "tb_vote-active")
    .find("span").html(parseInt(dislike) + 1);

  $("#tb_vote-yes")
    .find("a").attr("id", "tb_vote-disable");
}

// <-