JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://www.google.com/jsapi?autoload={%27modules%27:[{%27name%27:%27visualization%27,%27version%27:%271%27,%27packages%27:[%27annotationchart%27]}]}"></script>
<body>
<div id="tabbed_box_1" class="tabbed_box">	
<br />
    <div class="tabbed_area">
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Tab1</a></li>
            <li><a href="#" title="content_2" class="tab">Tab2</a></li>
            <li><a href="#" title="content_3" class="tab">Tab3</a></li>
        </ul>
       <div id="content_1" class="content">
           <div id="chart_div"></div>
        </div>
        <div id="content_2" class="content">
            <div id="chart_div2"></div>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>
            	<li><a href="">About</a></li>
			</ul>
        </div>
   </div>
</div>
</body>

CSS

body {
	background-image:url(Img/background.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:20px;
	margin-top:10px;
}

#tabbed_box_1 {
	margin: 0px 0px 0px auto;
	width:100%;
}
.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:3px;
	margin:5px;
	margin-left:130px;
	text-shadow: 4px 4px 8px white;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}
.tabbed_area 
{
    margin-top:30px;
	border:2px solid #494e52;
	background-color:#636d76;
	padding:8px;	
}

ul.tabs {
	margin:0px; padding:0px;
	margin-top:4px;
	margin-right:1px;
	margin-bottom:6px;
	float: right;
}
ul.tabs li {
	list-style:none;
	display:inline;
	}
ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:13px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
	background-image:url(images/tab_off.jpg);
	background-repeat:repeat-x;	 
	background-position:bottom;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54; 
	border-bottom: 1px solid #ffffff;
	background-image:url(images/tab_on.jpg);
	background-repeat:repeat-x;
	background-position:top;	
}
.content 
{
    margin-top:30px;
	background-color:#ffffff;
	padding:10px;
	border:2px solid #464c54; 	
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(images/content_bottom.jpg);
	background-repeat:repeat-x;	 
	background-position:bottom;	
}
#content_2, #content_3 { display:none; }

.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid...

JavaScript

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

        function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
            [
                new Date(2314, 2, 15), 12400, undefined, undefined,
                10645, undefined, undefined
            ],
            [
                new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                12374, undefined, undefined
            ],
            [
                new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                15766, 'Gallantors', 'First Encounter'
            ],
            [
                new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                34334, 'Gallantors', 'Statement of shared principles'
            ],
            [
                new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                66467, 'Gallantors', 'Mysteries revealed'
            ],
            [
                new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                79463, 'Gallantors', 'Omniscience achieved'
            ]
        ]);

        var options = {
            displayAnnotations: true,
            'height': 500,
            'width': 900,
        };

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
        var chart2 = new google.visualization.AnnotationChart(document.getElementById('chart_div2'));


        chart.draw(data, options);
        $('a[title=content_2]').one('click',function(){
     ...