JSFiddle - React, Tailwind, and code Playground

CSS

div{
  background-color: #777;
  margin-bottom: 2px;
}

JavaScript

var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
     function render(data){

        
     d3.select("body")
       .data(data)
       .enter()
       .append("div")
       .attr("class", "h-bar")
       .append("text")
       .text(function(d) { return d + "-"; })  
       .append("span");
  
    d3.selectAll("span")
      .data(data)
      .append("text")
      .text(function(d){
       return d;
      });
    d3.selectAll("div")
      .data(data)
      .style("width", function(d){
        return d*5+ "px";
      });

     }

     render (data);