JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cube" id="foo">
    <div class="front">
        <a href="#foo">go to foo</a>
    </div>
    
    <div class="right">
        <a href="#">go back</a>
    </div>
</div>

CSS

body {
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    padding:50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position:relative;
    min-height:10em;
}
.cube {
    width:10em;
    height:10em;
    position:absolute;
    top:50%;
    left:50%;
    margin-right:-5em;
    margin-top:-5em;
    -webkit-transform-origin:50% 50% 50%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition:all 1s ease;
    -moz-transform-origin:50% 50% 50%;
    -moz-transform-style: preserve-3d;
    -moz-transition:all 1s ease;
    -o-transform-origin:50% 50% 50%;
    -o-transform-style: preserve-3d;
    -o-transition:all 1s ease;
    transform-origin:50% 50% 50%;
    transform-style: preserve-3d;
    transition:all 1s ease;
}
.cube>div {
    width:100%;
    height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    background:orange;
    box-shadow:inset 0 0 1em #000;
    padding:1em;
    position:absolute;
    top:0;
    left:0;
    -webkit-transform:translateZ(5em);
    -moz-transform:translateZ(5em);
    -o-transform:translateZ(5em);
    transform:translateZ(5em);
}
.cube>.right {
    -webkit-transform:rotateY(90deg) translateZ(5em) ;
    -moz-transform:rotateY(90deg) translateZ(5em) ;
    -o-transform:rotateY(90deg) translateZ(5em) ;
    transform:rotateY(90deg) translateZ(5em) ;
}
.cube:target {
    -webkit-transform:rotateY(-90deg);
    -moz-transform:rotateY(-90deg);
    -o-transform:rotateY(-90deg);
    transform:rotateY(-90deg);
}