JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<title>css testing</title>
</head>
<body>
    <div id="TL" class="board">
        <p>Top-Left</p>
        <button onclick="changePos();">Go Here</button>
    </div>
    <div id="TM" class="board">
        <p>Top-Middle</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="TR" class="board">
        <p>Top-Right</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="ML" class="board">
        <p>Mid-Left</p>
        <button onclick="changePos();">Go Here</button>
    </div>
    <div id="MM" class="board">
        <p>Mid-Middle</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="MR" class="board">
        <p>Mid-Right</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="BL" class="board">
        <p>Bottom-Left</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="BM" class="board">
        <p>Bottom-Middle</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="BR" class="board">
        <p>Bottom-Right</p>
        <button onclick="();">Go Here</button>
    </div>
    <div id="ship" class="ship">ship</div>
</body>

CSS

html, body {
       height : 100%;
       width : 100%;
       padding : 0;
       margin : 0;
       overflow : hidden;
   }
   .ship {
       width : 15%;
       height : 8%;
       background-color : red;
       position : absolute;
       top : 0%;
       bottom : 0%;
       left : 0%;
       right : 0%;
       margin : auto;
       z-index : 1;
       animation-name : cssAnimation;
       animation-duration : 1s;
       animation-iteration-count : 1;
       animation-timing-function : ease;
       animation-fill-mode :;
       -webkit-animation-name : cssAnimation;
       -webkit-animation-duration : 1s;
       -webkit-animation-iteration-count : 1;
       -webkit-animation-timing-function : ease;
       -webkit-animation-fill-mode :;
       -ms-animation-name : cssAnimation;
       -ms-animation-duration : 1s;
       -ms-animation-iteration-count : 1;
       -ms-animation-timing-function : ease;
       -ms-animation-fill-mode :;
   }
   @-webkit-keyframes cssAnimation {
       0% {
           -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(0%);
       }
       50% {
           -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(-225%);
       }
       100% {
           -webkit-transform: rotate(0deg) scale(1) skew(0deg) translateX(-225%);
       }
   }
   .board {
       width: 33.3%;
       height: 33.3%;
       float: left;
       z-index: -1;
   }
   #TL {
       background-color:#DDD;
   }
   #TM {
       background-color:#AAA;
   }
   #TR {
       background-color:#777;
   }
   #ML {
       background-color:#444;
   }
   #MM {
       background-color:#DDD;
   }
   #MR {
       background-color:#AAA;
   }
   #BL {
       background-color:#777;
   }
   #BM {
       background-color:#444;
   }
   #BR {
       background-color:#DDD;
   }

JavaScript

function changePos() {
    document.getElementById('ship').className = 'ship';
}