JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dash">
    <div id="filter"></div>
    <div id="pie"></div>
    <div id="table"></div>
</div>

JavaScript

google.load('visualization', '1.1', {packages: ['controls']});
google.setOnLoadCallback(drawDash);

function drawDash () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Full Name');
    data.addColumn('string', 'First Name');
    data.addColumn('number', 'Sold');
    
    data.addRows([
        ['John Doe', 'John', 50],
        ['Jenny Bee', 'Jenny', 20],
        ['Jeff Bridges', 'Jeff', 60]
    ]);
    
    var pie = new google.visualization.ChartWrapper({
        chartType: 'PieChart',
        containerId: 'pie',
        options: {
            width: 300,
            height: 300
        },
        view: {
            columns: [1, 2]
        }
    });
        
    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table',
        options: {
            width: 600,
            height: 400
        },
        view: {
            columns: [0, 2]
        }
    });
    
    var filter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'filter',
        options: {
            filterColumnIndex: 0,
            ui: {
                labelStacking: 'vertical',
                allowMultiple: false,
                allowTyping: false
            }
        }
    });
    
    var dash = new google.visualization.Dashboard(document.getElementById('dash'));
    dash.bind([filter], [pie, table]);
    dash.draw(data);
}