JSFiddle - React, Tailwind, and code Playground

HTML

<div class="votes">
  <a href="vote?id=1337&how=up" class="arrow up" title="upvote">▲</a>
  <br/>
  <a href="vote?id=1337&how=un" class="arrow down" title="downvote">▼</a>
</div>

<div class="votes">
  <a href="vote?id=1338&how=up" class="arrow up" title="upvote">▲</a>
  <br/>
  <a href="vote?id=1338&how=un" class="arrow down" title="downvote">▼</a>
</div>

CSS

.arrow {
  font-size: 24px;
  display: block;
  text-decoration: none;
  color: #aaa;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.up:hover {
  color: #00ff00;
}

.unup:hover{
  color: #005500;
}

.down:hover {
  color: #550000;
}

.undown:hover{
  color:#dd0000;
}

JavaScript

var up_arrow = "▲",
  down_arrow = "▼",
  bind = function(target, type, handler) {
    if (target.addEventListener) {
      target.addEventListener(type, handler);
    } else target.attachEvent(type, handler);
  },
  unbind = function(target, type, handler) {
    if (target.removeEventListener) {
      target.removeEventListener(type, handler);
    } else target.detachEvent(type, handler);
  },
  hide = function(e) {
    e.style.visibility = "hidden";
  },
  show = function(e) {
    e.style.visibility = "visible";
  },
  upvote = function(e) {
    e.preventDefault();
    e = e || window.event;
    var target = e.target || e.srcElement;
    
    // upvote
    if (target.className.match(/arrow up/)) {
      target.className = "arrow unup";
      target.innerHTML = down_arrow;
      target.title="reverse upvote";
      unbind(target, 'click', upvote);
      bind(target, 'click', downvote);
      // this will fail in old versions of IE
      hide(target.nextElementSibling.nextElementSibling);
      return;
    }
    
    // reverse downvote
    if (target.className.match(/arrow undown/)) {
      target.className = "arrow down";
      target.innerHTML = down_arrow;
      target.title="downvote";
      unbind(target, 'click', upvote);
      bind(target, 'click', downvote);
      // this will fail in old version of IE
      show(target.previousElementSibling.previousElementSibling);
      return;
    }
  },
  downvote = function(e) {
    e.preventDefault();
    e = e || window.event;
    var target = e.target || e.srcElement;
    
    // downvote
    if (target.className.match(/arrow down/)) {
      target.className = "arrow undown";
      target.innerHTML = up_arrow;
      target.title="reverse downvote";
      unbind(target, 'click', downvote);
      bind(target, 'click', upvote);
      // this will fail in old versions of IE
      hide(target.previousElementSibling.previousElementSibling);
      return;
    }
    
    // reverse upvote
   ...