JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id='cssmenu'>
<ul>
   <li class='last'><a href='#'><span>Home</span></a></li>
   <li class='active'><a href='#'><span>Science</span></a></li>
   <li class='last'><a href='#'><span>Programming</span></a></li>
   <li class='last'><a href='#'><span>Roller Coasters</span></a></li>
   <li class='last'><a href='#'><span>Skiing</span></a></li>
</ul>
</div>

<h1 align = center>Top 10 Chemical Reactions</h1>
<div id="container">
<div id="navbar">Navigation</div>
<div id="content">
<h2>Sodium + Chlorine</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/Mx5JJWI2aaw" frameborder="0" allowfullscreen></iframe>
<h2>Gummy Bear + Potassium Chlorate</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/txkRCIPSsjM" frameborder="0" allowfullscreen></iframe>
<h2>Nitrogen Triiodide On Contact With Feather</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/zU46hQ_xO0k" frameborder="0" allowfullscreen></iframe>
<h2>Bromine + Aluminum</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/mkDhxlEW6Ig" frameborder="0" allowfullscreen></iframe>
<h2>Iodine + Aluminum</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/R6bBs2D0cpA" frameborder="0" allowfullscreen></iframe>
<h2>Hydrogen Peroxide + Potassium Iodide</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/ezsur0L0L1c" frameborder="0" allowfullscreen></iframe>
<h2>Thermite</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/LaVR35B3VIc?list=PLA9076A22090633C0" frameborder="0" allowfullscreen></iframe>
<h2>Briggs&#045;Rauscher reaction</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/Ch93AKJm9os" frameborder="0" allowfullscreen></iframe>
<h2>Alkali Metals In Water</h2>
<iframe width="420" height="315" src="http://www.youtube.com/embed/AfXVYY0LtoU" frameborder="0" allowfullscreen></iframe>
<h2>Old Nassau Reaction</h2>
<iframe width="420" height="315"...

CSS

<style>
html
{
background-image: linear-gradient(to bottom right, #FFA50A 0%, #EF2929 100%);
}

h1
{
text-align: center;
font-family: Garamond, serif;
line-height: 1em;
color: #47d110;
font-weight:bold;
font-size: 100px;
text-shadow:0px 0px 0 rgb(47,185,-8),1px 1px 0 rgb(32,170,-23),2px 2px 0 rgb(18,156,-37),3px 3px 0 rgb(3,141,-52),4px 4px 0 rgb(-11,127,-66),5px 5px 0 rgb(-26,112,-81), 6px 6px 0 rgb(-40,98,-95),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);
}

@charset 'UTF-8';
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
  background: -moz-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2edea), color-stop(100%, #c0bebf));
  background: -webkit-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -o-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: -ms-linear-gradient(top, #f2edea 0%, #c0bebf 100%);
  background: linear-gradient(to bottom, #f2edea 0%, #c0bebf 100%);
  font-weight: 600;
  height: 52px;
  width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  box-shadow: inset 0 1px 0 whitesmoke;
  -moz-box-shadow: inset 0 1px 0 whitesmoke;
  -webkit-box-shadow: inset 0 1px 0 whitesmoke;
  background: #f2edea...