JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE>
<html>
<head>
	<meta charset = 'utf8'>
	<title>Operations - About</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Begin Mapbox requests -->
	<script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.min.js'></script>
	<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.1.0/mapbox-gl-geocoder.css' type='text/css' />

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Exo:400,600|Ropa+Sans' rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC" rel="stylesheet">
	<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Arimo|Dosis|Lato' rel='stylesheet' type='text/css'>
	<!-- Style Sheets -->
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!-- end project-specific asset calls -->
</head>
<body>
	<div>
		<!--Navbar-->
		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
            <button type="button"...

CSS

/*these are classes, put in class declaration*/
<!--just for the About and data html sheets-->

.navbar,
.navbar-collapse,
.navbar-brand,
.nav,
#aboutlink,
#print-link,
.navbar-header {
    background: #332A85;
    color: #ffffff;
    text-align: right;
}

.navbar-default .navbar-nav>li>a {
  color: #fff !important;
}

#menu a.active, #menu a:hover ,.nav>li>a:focus, .nav>li>a:hover{
    transition-property: background-color, color;
    transition-duration: .2s;
    transition-timing-function: ease-out;
    background-color: #332A85;
    color: #fff;
  }

#print-link {
   pointer-events: none;
    cursor: default;
 }


.ccusa_container{
  padding-top: 12em;
  padding-left: 12em;
  padding-right: 12em;
  margin-bottom: 10px;
  color: black;
  font-size: 15px;
  font-family: 'Open Sans';
  text-align: justify;
  background-color: white;
}

.jumbotron {
  background-color: black;
  border: 2px solid black;
  text-align: center;
  height: 450px;
  color: white;
  font-family: 'Open Sans', sans-serif;
  padding-top: 12em;
  padding-left: 12em;
  padding-right: 12em;
  margin-bottom: 10px;
}

/*-- # = ids -*/

html, body {
    height: 0%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    background-color: white;
    color: black;
}


h2, h3 {
    font-size: 1.2em;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}


p {
    margin: 10px;
    text-align: left;
}


a.header1 {
   font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
      color: #fff;
}

a.body1{
    color: purple;
}



hr {
    display: block;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 2px;
}


.closeinfo {
    padding-top: 8em;
    padding-left: 8em;
    padding-right: 8em;
    margin-bottom: 10px;
    font-family: 'Open...