JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
	<div class="front">
		home
	</div>
	<div class="bottom"></div>
	<div class="left"></div>
</div>

CSS

:root {
	--extrude: 100px;
	--height: 150px;
	--width: 350px;
}

.wrap {

	position:relative;
	margin: 100px;
  width: var(--width);
  height: var(--height);
  background-color: #cccccc;
  border: solid 1px #000000;

  transform-style: preserve-3d;
  perspective: 1000px;
	perspective-origin: -200px 300px;
}
.wrap * {
	box-sizing: border-box;
}

.front {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #00FF0055;
  border: solid 1px #00000055;
  transform-origin: 50% 50%;
  transform: translateZ(var(--extrude));
}
.bottom {
  position: absolute;
  width: 100%;
  height: var(--extrude);
  background-color: #FFFF0055;
  border: solid 1px #FF000055;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--height) - var(--extrude))) rotateX(270deg);
}

.left {
	width: var(--extrude);
  height: 100%;
  background-color: #00FFFF55;
  border: solid 1px #FF00FF55;
  transform-origin: 0% 50%;
  transform: translateZ(var(--extrude)) rotateY(90deg);
}