JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='arena_move_btn arena_move_poff' data-move='nip'>Nip</div> 
  <div class='arena_move_btn arena_move_moff' data-move='bite'>Bite</div> 
  <div class='arena_move_btn arena_move_pdef' data-move='broad'>Broad Beak</div>
  <div class='arena_move_btn arena_move_mdef' data-move='chomp'>Chomp</div>
  <div class='arena_move_btn arena_move_p1' data-move='deepbite'>Deep Bite</div> 
  <div class='arena_move_btn arena_move_m1' data-move='venombite'>Venom Bite</div> 
  <div class='arena_move_btn arena_move_p2' data-move='scorpion'>Scorpion Sting</div> 
  <div class='arena_move_btn arena_move_m2' data-move='scratch'>Scratch</div>
  
  <div class='arena_move_btn arena_move_p3' data-move='reach'>Far Reach</div>
  <div class='arena_move_btn arena_move_m3' data-move='slash'>Slash</div>
  <div class='arena_move_btn arena_move_p4' data-move='shred'>Shred</div> 
  <div class='arena_move_btn arena_move_m4' data-move='kick'>Kick</div> 
  <div class='arena_move_btn arena_move_p5' data-move='bigkick'>Big Kick</div>
  <div class='arena_move_btn arena_move_m5' data-move='stomp'>Stomp</div>
  <div class='arena_move_btn arena_move_p6' data-move='wingflap'>Wing Flap</div>
  <div class='arena_move_btn arena_move_m6' data-move='wingsmack'>Wing Smack</div> 
  <div class='arena_move_btn arena_move_p7' data-move='slap'>Slap</div>
  <div class='arena_move_btn arena_move_m7' data-move='punch'>Punch</div>
  <div class='arena_move_btn arena_move_p8' data-move='wrestle'>Wrestle</div>
  <div class='arena_move_btn arena_move_m8' data-move='slam'>Slam</div>

CSS

img, div {image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;-ms-interpolation-mode:  nearest-neighbor;image-rendering: pixelated;}


.arena_move_btn {width:180px;height:50px;box-sizing:border-box;padding:5px;display:inline-table;vertical-align:top;background-image:url(http://griffusion.elementfx.com/pics/ui/arenamovebtns.png);background-size:1000% 400%;cursor:pointer;}
.arena_move_poff {background-position: 0 0;}
.arena_move_poff:hover {background-position: 0 -50px;}
.arena_move_moff {background-position:0 -100px;}
.arena_move_moff:hover {background-position:0 -150px;}
.arena_move_pdef {background-position:-180px 0;}
.arena_move_pdef:hover {background-position:-180px -50px;}
.arena_move_mdef {background-position:-180px -100px;}
.arena_move_mdef:hover {background-position:-180px -150px;}

.arena_move_p1 {background-position: -360px 0;}
.arena_move_p1:hover {background-position: -360px -50px;}
.arena_move_m1 {background-position: -360px -100px;}
.arena_move_m1:hover {background-position:-360px -150px;}
.arena_move_p2 {background-position:-540px 0;}
.arena_move_p2:hover {background-position:-540px -50px;}
.arena_move_m2 {background-position:-540px -100px;}
.arena_move_m2:hover {background-position:-540px -150px;}
.arena_move_p3 {background-position: -720px 0;}
.arena_move_p3:hover {background-position: -720px -50px;}
.arena_move_m3 {background-position:-720px -100px;}
.arena_move_m3:hover {background-position:-720px -150px;}
.arena_move_p4 {background-position:-900px 0;}
.arena_move_p4:hover {background-position:-900px -50px;}
.arena_move_m4 {background-position:-900px -100px;}
.arena_move_m4:hover {background-position:-900px -150px;}
.arena_move_p5 {background-position: -1080px 0;}
.arena_move_p5:hover {background-position: -1080px -50px;}
.arena_move_m5 {background-position:-1080px -100px;}
.arena_move_m5:hover {background-position:-1080px -150px;}
.arena_move_p6 {background-position:-1260px...