JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chartWrapper">


					<div class="wrap">
						<div class="cube">
							<div class="front"></div>
							<div class="back"></div>
							<div class="top"><span></span></div>
							<div class="bottom"></div>
							<div class="right"><span></span></div>
						</div>
					</div>
					<div class="wrapBelow">
						<div class="cubeBelow">
							<div class="front"><div> &euro;</div></div>
							<div class="back"></div>
							<div class="top"><span></span></div>
							<div class="right"><span></span></div>
						</div>
					</div>

					</div>
<div class="chartData">
						<div class="chartDataLeft">
						<div class="increment">+</div>
						<div class="decrement">-</div>
						</div>
						
					</div>

CSS

.chartWrapper {
	margin: 15px 0;
}
.wrap, .wrapBelow {
    position:relative;
    left:80px;
	perspective: 1200px;
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective-origin: 100% -200px;
	-webkit-perspective-origin: 100% -200px;
	-moz-perspective-origin: 100% -200px;
}
.wrapBelow {
    top:78px; /* cube height + position top*/
    left:80px;
}

.cube, .cubeBelow {
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}

.cube>div, .cubeBelow>div {
	position: absolute;
	width: 70px;
	height: 78px;
    border:0px solid black;
        
}

.cube>.front, .cube>.right {
background: rgb(156,224,187); /* Old browsers */

background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzljZTBiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMGU1YTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
background: -moz-linear-gradient(top,  rgba(156,224,187,1) 0%, rgba(224,229,165,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(156,224,187,1)), color-stop(100%,rgba(224,229,165,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(156,224,187,1) 0%,rgba(224,229,165,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(156,224,187,1) 0%,rgba(224,229,165,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(156,224,187,1) 0%,rgba(224,229,165,1) 100%); /* IE10+ */
background:...

JavaScript

/*
ISSUE: CLICK ON "+" SIGN UNTIL THE BLUE BAR ALMOST COVER THE ENTIRE BAR..
YOU WILL NOTICE THAT THE RED SUBBAR WILL BE DISPLAYED A LITTLE ABOVE WHERE IT SHOULD BE
THAT'S BECAUSE "SOMETIMES" (EVERY ONCE IN A WHILE CLICK) THE RED BAR SHIFT UP 1 PIXEL, AND SO PROGRESSIVELY CHANGE
ITS POSITION, CAUSING THE WEIRD EFFECT 

THANKS FOR ANY HINT
*/



var $j = jQuery.noConflict();
$j(document).ready(function() {

var capVersamentoEffettivo = 5164;
var capVersamento = 5200; 
var risparmioIpotizzatoTmp = 2582;
var altezzaBarra = 156; 
var versamentoIniziale = 1795;
var incrementoVersamenti = 100; 
var offsetPixel = 3;

    
    
$j(".increment").click(function() {
	renderStackedChart(versamentoIniziale+incrementoVersamenti);
});
    
$j(".decrement").click(function() {
    renderStackedChart(versamentoIniziale-incrementoVersamenti);
});


	function renderStackedChart(nuovoVersamento) {
				
	if (nuovoVersamento > versamentoIniziale) updateChart("increment",nuovoVersamento);
	else updateChart("decrement",nuovoVersamento);
					
	}    
    
    
function updateChart(direction, versamento) {
	
	
	var currentHeight = $j(".cube>.front").css("height").replace("px","");
	
	if ((direction == "increment") && (parseInt(currentHeight) >= altezzaBarra)) return;
	if ((direction == "decrement") && (parseInt(currentHeight) <= 0)) return;
		
	
	console.log("currentHeight: " + currentHeight);
	
	if ((parseInt(currentHeight) == (altezzaBarra-offsetPixel)) && (direction == "increment")) {
		$j(".cube>.right").css({   
			'box-shadow':'3px 1px 2px 0 #232323',
			'-moz-box-shadow':'3px 1px 2px 0 #232323',
			'-webkit-box-shadow':'3px 1px 2px 0 #232323'
		});
		
		$j(".cubeBelow>.front div").css({
			'margin-top':'10px'
		});
		versamento = capVersamentoEffettivo;
	} else {
		$j(".cube>.right").css({   
			'box-shadow':'3px 3px 5px 0 #232323',
			'-moz-box-shadow':'3px 3px 5px 0 #232323',
			'-webkit-box-shadow':'3px 3px 5px 0 #232323'
		});
		$j(".cubeBelow>.front...