JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test test1">
		<h1>1.</h1>
		<div class="cube">
			<div class="side front">1</div>
			<div class="side back">6</div>
			<div class="side right">4</div>
			<div class="side left">3</div>
			<div class="side top">5</div>
			<div class="side bottom">2</div>
		</div>
	</div>

	<div class="test test2">
		<h1>2.</h1>
		<div class="cube cuboid">
			<div class="side front">1</div>
			<div class="side back">6</div>
			<div class="side right">4</div>
			<div class="side left">3</div>
			<div class="side top">5</div>
			<div class="side bottom">2</div>
		</div>
	</div>

CSS

div.test {
			xwidth: 100%;
			xperspective: 750px;
			height: 200px;
		}

		/* basic cube */
		.cube {
			font-size: 4em;
			width: 500px;
			margin: auto;
			/* MSIE11 does not support preserve-3d.
			  for MSIE all transforms must be applied to all elements */
		}

		.side {
			position: absolute;
			width: 100px;
			height: 100px;
			background: rgba(255,0,0,0.3);
			border: 1px solid black;
			color: white;
			text-align: center;
			line-height: 100px;
		}
		/* for MSIE11 compatibility, avoid using a transform on the parent, combine all parent+child transforms, transform-style: preserve3d is not supported */
		.front {
			transform: rotateX(-40deg) rotateY(32deg) translateZ(50px);
			z-index: 1000;
		}
		.top {
			transform: rotateX(-40deg) rotateY(32deg) rotateX(90deg) translateZ(50px);
			z-index: 1000;
		}
		.right {
			transform: rotateX(-40deg) rotateY(32deg) rotateY(90deg) translateZ(50px);
		}
		.left {
			transform: rotateX(-40deg) rotateY(32deg) rotateY(-90deg) translateZ(50px);
			z-index: 1000;
		}
		.bottom {
			transform: rotateX(-40deg) rotateY(32deg) rotateX(-90deg) translateZ(50px);
		}
		.back {
			transform: rotateX(-40deg) rotateY(-148deg) translateZ(50px);
		}

		/* cuboid - 100 x 100 x 200 */
		.cuboid .front {
			width: 200px;
		}
		.cuboid .top {
			width: 200px;
		}
		.cuboid .right {
			transform: rotateX(-40deg) rotateY(122deg) translateZ(150px);
		}
		.cuboid .back {
			width: 200px;
		}
		.cuboid .bottom {
			width: 200px;
		}
        .cuboid .left,
        .cuboid .right {
            margin-top: 16px;
            margin-left: 7px;
        }