JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="shadow">
        <div class="bottom">bottom</div>
    </div>
</div>

CSS

.wrap {
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 75px 00px;
}
.shadow div {
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 1);
    font-size: 20px;
    text-align: center;
    line-height: 150px;
    color: rgba(0, 0, 0, 0.5);
    font-family: sans-serif;
    text-transform: uppercase;
}
.bottom {
    -webkit-transform: rotateX(90deg) translateY(75px);
    -webkit-transform-origin: bottom center;
}
@-webkit-keyframes spin {
    from, to {
        -webkit-transform: rotateY(0deg);
    }
    16% {
        -webkit-transform: rotateY(-90deg);
    }
    33% {
        -webkit-transform: rotateY(-90deg);
    }
    50% {
        -webkit-transform: rotateY(-180deg);
    }
    66% {
        -webkit-transform: rotateY(-180deg);
    }
    83% {
        -webkit-transform: rotateY(-270deg);
    }
}
.shadow {
    -webkit-animation: spin 26s infinite ease-in-out;
}
.shadow {
    position: relative;
    width: 150px;
    -webkit-transform-style: preserve-3d;
}