JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  <link rel="stylesheet" type="text/css" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.css" />
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">

/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["treemap"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
          // Create and populate the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Region');
          data.addColumn('string', 'Parent');
          data.addColumn('number', 'Market trade volume (size)');
          data.addColumn('number', 'Market increase/decrease (color)');
          data.addRows([
            ["Global",null,0,0],
            ["America","Global",0,0],
            ["Europe","Global",0,0],
            ["Asia","Global",0,0],
            ["Australia","Global",0,0],
            ["Africa","Global",0,0],
            ["Brazil","America",11,10],
            ["USA","America",52,31],
            ["Mexico","America",24,12],
            ["Canada","America",16,-23],
            ["France","Europe",42,-11],
            ["Germany","Europe",31,-2],
            ["Sweden","Europe",22,-13],
            ["Italy","Europe",17,4],
            ["UK","Europe",21,-5],
            ["China","Asia",36,4],
            ["Japan","Asia",20,-12],
            ["India","Asia",40,63],
            ["Laos","Asia",4,34],
            ["Mongolia","Asia",1,-5],
            ["Israel","Asia",12,24],
            ["Iran","Asia",18,13],
   ...

CSS

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

/* ######### CSS for Inverted Modern Bricks II Tabs. Remove if not using ######### */

.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/ 
border-top: 1px solid white;
}

.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color...

JavaScript

//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) 

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
    this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
    this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
    this.enabletabpersistence=true
    this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
    this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
    this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
    this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
    this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){ 
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
  ...