JSFiddle - React, Tailwind, and code Playground

HTML

<a id="tile" target="_blank"> Click me </a>

CSS

body {
 -moz-transform-style: preserve-3d;   
    -webkit-transform-style: preserve-3d;
}

a {
  width: 200px;
  height: 200px;
  background-color: deepSkyBlue;
  color: #fff;
  margin: 20px;
  display: block;
    
  -webkit-transform-origin: 50% 50%;
  
  -webkit-transition: -webkit-transform 0.08s;
  
  -moz-transform-origin: 50% 50%;
  
  -moz-transition: -moz-transform 0.08s;

}

JavaScript

var tile = document.getElementById('tile');

function MouseDown() {
  
  console.log( "down" );
  tile.style.webkitTransform = "perspective(800px) translateZ( -30px )";
  tile.style.MozTransform    = "perspective(800px) translateZ( -30px )";  

}

function MouseUp() {

  console.log( "up" );
  tile.style.backgroundColor = "deepPink";
  tile.style.webkitTransform = "translateZ( 0px )";
  tile.style.MozTransform    = "translateZ( 0px )";
    
}
tile.addEventListener('mouseup',   MouseUp,   false);  
tile.addEventListener('mousedown', MouseDown, false);