JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<div class="li"><i class="fa-solid fa-file-lines"></i>200</div>
	<div class="li"><i class="fa-solid fa-file-circle-exclamation"></i>49</div>
	<div class="li"><i class="fa-solid fa-laptop-file"></i>38</div>
	<div class="li"><i class="fa-solid fa-file-signature"></i>25</div>
	<div class="li"><i class="fa-solid fa-file-invoice-dollar"></i>15</div>
</div>

CSS

:root {
	--width-funil: 50px;
	--width-tamTotal: calc(var(--width-funil) + 32px);
	--width-tamTotal2: calc(var(--width-funil) + 34px);
	--width-tamTotal3: calc(var(--width-funil) + 15px);
	--height-funil: 50px;
	--border-size: 1px;
	--lumenk: #F15E36;
	--border-color: grey;
	--cor-fundo: white;
}

.li {
	height: var(--height-funil);
	width: var(--width-funil);
	padding-left: 20px;
	background: var(--cor-fundo);
	color: black;
	display: inline-block;
	position: relative;
	margin-left: 20px;
	line-height: 50px;
	font-family: sans-serif;
	font-size: 15px;
	box-sizing: unset !important;
}

.li::before,
.li::after {
	content: '';
	left: -15px;
	position: absolute;
	height: 23px;
	width: var(--width-tamTotal);
	border-left: 2px solid var(--border-color);
	border-right: 2px solid var(--border-color);
	box-sizing: unset !important;
}

.li::before {
	border-top: 2px solid var(--border-color);
	transform-origin: 0% 0%;
	transform: skewX(30deg);
	top: 0;
	box-shadow: inset 0 8px 0 8px var(--cor-fundo), inset -6px 8px 0 8px var(--cor-fundo);
}

.li::after {
	border-bottom: 2px solid var(--border-color);
	transform-origin: 0% 100%;
	transform: skewX(-30deg);
	bottom: 0;
	box-shadow: inset 0 -8px 0 8px var(--cor-fundo), inset -6px -8px 0 8px var(--cor-fundo);
}

.li:hover {
	color: white;
	background-color: var(--lumenk);
}

.li:hover::before {
	color: white;
	box-shadow: inset 0 8px 0 8px var(--lumenk), inset -6px 8px 0 8px var(--lumenk);

}

.li:hover::after {
	color: white;
	box-shadow: inset 0 -8px 0 8px var(--lumenk), inset -6px -8px 0 8px var(--lumenk);
}

/* First and Last styles */
.li:first-of-type {
	left: -15px;
	box-shadow: 15px 0 0 0 var(--cor-fundo);
	border-left: 2px solid var(--border-color);
}

.li:first-of-type::before,
.li:first-of-type::after {
	left: -1px;
	width: var(--width-tamTotal2);
	border-left: 0;
}

.li:last-of-type {
	left: 0px;
	width: var(--width-tamTotal3);
	box-shadow: inset -2px 0 0 0 var(--border-color), inset 0 -2px 0 0 var(--border-color),...