JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="skybox1">
    <img src=offices/DRSlogo.png align=left width=60 height=60><strong><font size="6">West Virginia Division of Rehabilitation  Services</font></strong>

    <br>
<font size="5">&nbsp;Field Offices</font><button onclick="toggle_visibility('skybox2')" style="float: right;">toggle legend</button>
    <br>
<font size="3"><i>Click a marker on the map for office information.<br>
<span class="toplinks">
    <a href="http://wvdrs.org/" style="color:white">WVDRS Home</a>
    <a href="http://wvdrs.org/data/DRS_Location_Map_2014.pdf"      style="color:white">Text-Only</a> 
</span>Click elsewhere on the map to get county and WVDRS District information.</i></font>

</div>
<div id="skybox2">
    <!--<h3>WVDRS Districts<h3>-->
    <p>
        <img src="map-pin.png" width="25" height="40" alt="map pin marker">DRS office</p>
    <div class="color blue"></div>
    <p><font size="4">District 1</font>
    </p>
    <div class="color yellow"></div>
    <p><font size="4">District 2</font>
    </p>
    <div class="color brown"></div>
    <p><font size="4">District 3</font>
    </p>
    <div class="color purple"></div>
    <p><font size="4">District 4</font>
    </p>
    <div class="color pink"></div>
    <p><font size="4">District 5</font>
    </p>
    <div class="color green"></div>
    <p><font size="4">District 6</font>
    </p>
</div>
<div id="map_canvas"></div>

CSS

html, body {
    overflow:hidden;
    margin:1;
    padding:0;
    height: 100%;
    width: 100%;
}
#map_canvas {
    height:100%;
    width:100%;
}
h3 {
    margin-top: 0;
}
h4 {
    margin-top: 0;
    font-weight: bold;
}
#skybox1 {
    width:100%;
    background-color: #222;
    border-style: solid;
    border-color: #222;
    border-radius: 0px;
    color: #eee;
    padding: 0%;
}
.toplinks {
    float:right;
    font-style:normal;
    margin-right:0.5em;
}
#skybox2 {
    width: auto;
    height: auto;
    background-color: #222;
    border-style: solid;
    border-color:#222;
    border-radius: 20px;
    color: #eee;
    padding: 0 0.4em;
    position: absolute;
    z-index: 100;
    bottom: 15px;
    right: 10px;
}
#skybox2 {
    position: relative background-color:222;
}
.color {
    border: 1px solid;
    border-color:#222;
    height: 20px;
    width: 20px;
    margin-right: 0.2em;
    float: left;
}
.blue {
    background: #cfe2f3;
}
.yellow {
    background: #ffff00;
}
.brown {
    background: #bf9000;
}
.purple {
    background: #674ea7;
}
.pink {
    background: #ea9999;
}
.green {
    background: #6aa84f;
}

JavaScript

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else if(e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';
}
function initialize() {
    var myLatlng = new google.maps.LatLng(38.763853, -80.310059);
    var mapOptions = {
        zoom: 8,
        center: myLatlng,
        disableDefaultUI: false,
        mapTypeControl: false,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.DEFAULT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT
        },
        scaleControl: false,
        streetViewControl: true,
        rotateControl: false,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROAD,
        styles: [{
            featureType: 'all',
            elementType: "",
            stylers: [{
                hue: ""
            }, {
                saturation: -100
            }, {
                lightness: ""
            }, {
                gamma: ""
            }]
        }, {
            featureType: 'poi.park',
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }]
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    county = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: {
            enabled: false
        },
        query: {
            select: "col2",
            from: "1LFQlSRds4LnGpf16wF2d-srEBdICE3A0F6aFFIYi",
            where: ""
        },
        options: {
            styleId: 2,
            templateId: 3
        }
    });

    district = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: {
            enabled:...