JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vote_buttons">
  <iframe class="vote_iframe" name="vote_iframe_12345"></iframe>
  <form method="post" action="/12345/vote" target="vote_iframe_12345">
    <input class="vote_arrow" type="image" src="//i.imgur.com/ia4L3S9.gif" alt="upvote" name="direction" value="up" />
    <input class="vote_arrow" type="image" src="//i.imgur.com/ia4L3S9.gif" alt="downvote" name="direction" value="down" />
    <div class="vote_disabler"></div>
  </form>
</div>

CSS

body {
  background-color: #f6f6ef;
}

.vote_iframe {
  display: none;
}

.vote_buttons {
  width: 20px;
  height: 30px;
  overflow: hidden;
}

.vote_arrow {
  display: block;
  margin-bottom: 3px;
}

.vote_disabler {
  background-color: #f6f6ef;
  position: absolute;
  z-index: 9999;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 0px;
  transition-delay: 99999999s;
  transition-property: height;
  transition-duration: 0.01s;
}

.vote_arrow:active ~ .vote_disabler {
  transition-delay: 0s;
  height: 100%;
  pointer-events: none;
}

.vote_arrow[value="down"] {
  -webkit-transform: rotate(180deg);  /* Chrome and other webkit browsers */
  -moz-transform:    rotate(180deg);  /* FF */
  -o-transform:      rotate(180deg);  /* Opera */
  -ms-transform:     rotate(180deg);  /* IE9 */
  transform:         rotate(180deg);  /* W3C complaint browsers */

  /* IE8 and below */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}