JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {
        packages: ["orgchart"],
        language: 'es'
    });

</script>

<style>
    #chart_div .minudo {
        font-family: "Work Sans", sans-serif;
        font-size: 15px;
    }

    #chart_div .puesto {
        color: #D7D5A1;
        font-style: italic;
    }

    #chart_div table tbody tr:nth-child(2n+1) {
        background: none;
        border: none;
    }

    #chart_div table tbody tr {
        border: none;
    }

    #chart_div .google-visualization-orgchart-linebottom {
        border-bottom: 1px solid #FF4D16;
    }

    #chart_div .google-visualization-orgchart-lineright {
        border-right: 1px solid #FF4D16;
    }

    #chart_div .google-visualization-orgchart-lineleft {
        border-left: 1px solid #FF4D16;
    }

</style>

<div id="chart_div" style="background-color: #f6f6f5;"></div>

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addColumn('string', 'ToolTip');

            // For each orgchart box, provide the name, manager, and tooltip to show.
            data.addRows([
                [{
                    v: 'Mario',
                    f: 'Mario'
                }, '', ''],
                [{
                    v: 'Eva',
                    f: 'Eva'
                }, 'Mario', ''],
                [
                    'Alice', 'Mario', ''
                ],
                [
                    'Bob', 'Eva', ''
                ],
                [
                    'Pedro', 'Eva', ''
                ],
                [
                    'Carol', 'Eva', ''
                ]
            ]);

            // Create the chart.
        ...

CSS

#chart_div .minudo {
    font-family: '"Work Sans", sans-serif';
    font-size: 15px;
}

#chart_div .puesto {
    color: #D7D5A1;
    font-style: italic;
}

#chart_div table tbody tr:nth-child(2n+1) {
    background: none;
    border: none;
}

#chart_div table tbody tr {
    border: none;
}

#chart_div .google-visualization-orgchart-linebottom {
    border-bottom: 1px solid #FF4D16;
}

#chart_div .google-visualization-orgchart-lineright {
    border-right: 1px solid #FF4D16;
}

#chart_div .google-visualization-orgchart-lineleft {
    border-left: 1px solid #FF4D16;
}