JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="myConta"></div>

CSS

.hover_group:hover {
      opacity: 0.5;
  }
  #myConta {
      background-color:black;
      text-align:right;
  }

JavaScript

$("#myConta").height(window.innerHeight - (window.innerHeight / 40));

var width = window.innerWidth - (window.innerWidth / 8) , // divide by 8 instead of 10 to increase the size of the container
    height = window.innerHeight - (window.innerHeight / 8) ,// divide by 8 instead of 10 to increase the size of the container
    boxW = width / 4,
    boxH = height / 4,
    boxSize = boxW + boxH,

    xPos0 = 20,
    xPos1 = 40,
    xPos2 = boxW + 40,
    xPos3 = boxW * 2 + 40,
    xPos4 = boxW * 3 + 40,
    yPos1 = 0,
    yPos2 = boxH,
    yPos3 = boxH * 2,
    yPos4 = boxH * 3,
    yPos5 = boxH * 4,

    salesXPos =0,
    salesYPos =yPos2 + boxH,       
    salesWidth = 20,
    salesHeight = boxH * 2,
    
    profitXPos =xPos2+ boxW,
    profitYPos = height + 20,
    profitWidth = boxW * 2,
    profitHeight = 20;

        
var CreateRect = function (x, y, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", boxW)
        .attr("height", boxH)
        .attr("fill", boxColor)
        .attr("class", "hover_group");
};
var CreateRectWithLength = function (x, y, w, h, boxColor) {
    svgContainer.append("rect")
        .attr("x", x)
        .attr("y", y)
        .attr("width", w)
        .attr("height", h)
        .attr("fill", boxColor);
};

var CreateText = function(x, y, text, textColor) {
     svgContainer.append("text")
         .attr("x", x)
         .attr("y", y)
         .attr("stroke", textColor)
         .text(text);
};

var CreateRotatedText = function(x, y, text, textColor) {
     svgContainer.append("text")
         .text(text)
         .attr("x", x)
         .attr("y", y)
         .attr("stroke", textColor)
         .attr("text-anchor", "middle")
//        .attr("dy", ".75em")
       .attr('transform', 'translate(-200,230) rotate(-90)')

};



var CreateTextInMain = function(x, y, text, textColor) {
     $("#myConta").append("div")
         .attr("x", x)
         .attr("y", y)
        ...