JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li><a href="#alleCharts" data-toggle="tab">Alle Charts</a></li>
    <li><a href="#veiligheid" data-toggle="tab">Veiligheid</a></li>
    <li><a href="#aangiften" data-toggle="tab">Aangiften</a></li>
    <li><a href="#misdrijven" data-toggle="tab">Misdrijven</a></li>
</ul>
<h1>Amsterdam</h1>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="alleCharts"> 
        <div id="chart_centrum" style="position:absolute;left:600px;top:250px;width: 300px; height: 300px;"></div>
        <div id="chart_noord" style="position:absolute;left:800px;top:100px;width: 300px; height: 300px;"></div>
        <div id="chart_zuid" style="position:absolute;left:550px;top:500px;width: 300px; height: 300px;"></div>
        <div id="chart_west" style="position:absolute;left:400px;top:250px;width: 300px; height: 300px;"></div>
        <div id="chart_zoost" style="position:absolute;left:850px;top:750px;width: 300px; height: 300px;"></div>
        <div id="chart_nwest" style="position:absolute;left:150px;top:450px;width: 300px; height: 300px;"></div>
        <div id="chart_oost" style="position:absolute;left:950px;top:450px;width: 300px; height: 300px;"></div>
    </div>
    <div class="tab-pane" id="veiligheid">
        <div id="chart_vcentrum" style="position:absolute;left:600px;top:350px;width: 300px; height: 300px;"></div>
        <div id="chart_vzuid" style="position:absolute;left:550px;top:500px;width: 300px; height: 300px;"></div>
        <div id="chart_vnoord" style="position:absolute;left:800px;top:100px;width: 300px; height: 300px;"></div>
    </div>
    <div class="tab-pane" id="aangiften">
        <div id="chart_acentrum"...

JavaScript

function drawCharts() {
    google.visualization.drawChart({
        "containerId": "chart_centrum",
        "dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
        "query":"SELECT 'misdrijfper', 'aangiftenper', 'bevolkingper'   FROM 1EwP1wvTtIe0gy2aTsv2xe8UvYbkWD_eMZTjrp6s WHERE 'stadsdeel'='Centrum'",
        "chartType":  "ColumnChart",
        "options": {
            "title":"centrum",
            legend: { position: 'top', alignment: 'start' },
            "backgroundColor": { fill: "none" }
        }
    });
    google.visualization.drawChart({
        "containerId": "chart_noord",
        "dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
        "query":"SELECT 'misdrijfper', 'aangiftenper', 'bevolkingper'   FROM 1EwP1wvTtIe0gy2aTsv2xe8UvYbkWD_eMZTjrp6s WHERE 'stadsdeel'='Noord'",
        "chartType":  "ColumnChart",
        "options": {
            "title":"Noord",
            legend: { position: 'top', alignment: 'start' },
            "backgroundColor": { fill: "none" }
        }
    });
    google.visualization.drawChart({
        "containerId": "chart_zuid",
        "dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
        "query":"SELECT 'misdrijfper', 'aangiftenper', 'bevolkingper'   FROM 1EwP1wvTtIe0gy2aTsv2xe8UvYbkWD_eMZTjrp6s WHERE 'stadsdeel'='Zuid'",
        "chartType":  "ColumnChart",
        "options": {
            "title":"Zuid",
            legend: { position: 'top', alignment: 'start' },
            "backgroundColor": { fill: "none" }
        }
    });
    google.visualization.drawChart({
        "containerId": "chart_west",
        "dataSourceUrl": 'https://www.google.com/fusiontables/gvizdata?tq=',
        "query":"SELECT 'misdrijfper', 'aangiftenper', 'bevolkingper'   FROM 1EwP1wvTtIe0gy2aTsv2xe8UvYbkWD_eMZTjrp6s WHERE 'stadsdeel'='West'",
        "chartType":  "ColumnChart",
        "options": {
            "title":"West",
            legend: { position: 'top', alignment:...