JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<div class="cube">
    <a href="http://google.com" target="_blank">
    <div class="side back">
        <div class="guides"></div>
        <span>BACK</span>
    </div>
    <div class="side top">
        <div class="guides"></div>
        <span>TOP</span>
    </div>
    <div class="side bottom">
        <div class="guides"></div>
        <span>BOTTOM</span>
    </div>
    <div class="side front">
        <div class="guides"></div>
        <span>FRONT</span>
    </div>
    </a>
</div>

CSS

/* cube
*/

        .scene {
            width: 300px;
            height: 300px;
            margin: 75px auto 0;
            perspective: 1200px;
        }

        .cube {
            position: relative;
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transform: translateZ(-150px) rotateX(0deg);
            animation: example 15s linear infinite;
        }

        .side {
            position: absolute;
            width: 300px;
            height: 300px;
            box-sizing: border-box;
            background-color: #999;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 120px 0;
            font: 50px/1 'Trebuchet MS', sans-serif;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
        }
        .side::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.15);
        }
        .side span {
            position: relative;
            display: block;
        }

        .back span {
            animation: back 15s linear infinite;
        }
        .top span {
            animation: top 15s linear infinite;
        }
        .bottom span {
            animation: bottom 15s linear infinite;
        }
        .front span {
            animation: front 15s linear infinite;
        }

        .guides {
            position: absolute;
            top: 0;
            left: 50px;
            width: 200px;
            height: 100%;
            border-style: dotted;
            border-width: 0 1px;
            color: rgba(255, 255, 255, 0.6);
        }
        .guides::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            height: 100%;
            border-left: 1px dotted;
       ...