JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id='chart_div' style="border: 1px solid red; width: 500px;"></div>

CSS

table{
border-collapse: separate !important;
   word-break: break-all;
}
   
.google-visualization-orgchart-node {
background: #FBF4AE !important;
    border: 1px solid #DDDAB9 !important;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 5px #F2F2F2, 0 -1px 1px #FFFFFF inset;
    padding-bottom: 15px !important;
    padding-top: 15px !important;
    width: 165px !important;
    white-space: nowrap;
    }
  .google-visualization-orgchart-lineleft{
  border-left: 1px solid #CFCDCE !important;
  }
  .google-visualization-orgchart-linebottom{
  border-bottom: 1px solid #CFCDCE !important;
  }
 .google-visualization-orgchart-node{
 color: #3a3a38;;
 }
 .google-visualization-orgchart-lineright {
    border-right: 1px solid #CFCDCE !important;
}
.plus{
position: relative;
    top: 0px;
    height: 0px;
    cursor: pointer;
}

JavaScript

google.load('visualization', '1', {packages: ['orgchart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var s = '<div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Mike</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Jim</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Alice</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Bob</div><div class="google-visualization-orgchart-node  google-visualization-orgchart-node-small" style=\"display: inline-block; padding: 3px; margin: 5px;\">Carol</div';
    
    document.getElementById('chart_div').innerHTML = s;
}