JSFiddle - React, Tailwind, and code Playground

HTML

<div class="perspective">
    <a href="#" class="box">
          <div class="innerbox">
                text
          </div>    
    </a>
</div>

CSS

.perspective
    {
        position:relative;
        width:100px;
		height:100px;
        margin:200px 0px 0px 200px;
        -moz-perspective: 300px;
	    -webkit-perspective: 300px;
	    -o-perspective: 300px;
 	    -ms-perspective: 300px;
	    perspective: 300px;
    }

.box
	{
		width:80px;
		height:80px;	
		position:absolute;
		top:0;
        bottom:0;
		left:0;
		right:0;
		margin:auto;
		border: 5px solid #000;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all 800ms ease;
		-moz-transition: all 800ms ease;
		-ms-transition: all 800ms ease;
		-o-transition: all 800ms ease;
		transition: all 800ms ease;
	}

.perspective 
	{
	  -moz-perspective: 300px;
	  -webkit-perspective: 300px;
	  -o-perspective: 300px;
	  -ms-perspective: 300px;
	  perspective: 300px;
	}

.innerbox
	{
		margin:30px 0px 0px 20px;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);	
	}

.box:hover
	{
		-moz-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		-o-transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		transform: rotateY(180deg);
		-webkit-transition: all 800ms ease;
		-moz-transition: all 800ms ease;
		-ms-transition: all 800ms ease;
		-o-transition: all 800ms ease;
		transition: all 800ms ease;	
	}