JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>MacroPlay Games</title>
    <meta name="description" content="This site is my first assignment for my Application Development class." />
    <meta name="author" content="SimKessy" />

    <meta name="viewport" content="width=device-width; initial-scale=1.0" />

    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    
    <link rel="stylesheet" href="macro.css">
    <script src="macro.js"></script>
    
      
</head>
<body>
<!--Fixed header-->
<div id="topWrapper">
    <a href="index.html">
        <header id="top_header">
            <h1>MacroPlay Games</h1>
        </header>
    </a>
    <nav id="topnav">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="video.html">Trailers</a></li>
        </ul>
    </nav>   
</div>

<!--Site Main Body--> 
<div id="wrapper">
    
    <div id="body_div">
        <div id="dimPlayer" class="dim"></div>
        <div id="video_container">
            <video id="trailers" poster="poster.jpg">
                <source src="vLast.mp4" type="video/mp4">
                <source src="vLast.webm" type="video/webm">
            </video>
            <nav>
               <div id="controls" class="cAnimated cFadeInRight">
                    <div id="defaultBar">
                        <div id="progressBar"></div>
                    </div>
                    <button id="playButton"><img src="icons/play.png" /></button>
                    <button id="vol" onclick="showSlider()"><img src="icons/vol.png"...

CSS

* {
    margin: 0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display: block;
}
body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    -moz-box-pack:center;
    box-pack:center;
    background:url('bg4.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
h1{
    font:bold 26px tahoma;
    color: white;
}
h2{
    font: bold 10px tahoma;
    color:#CCCCCC;
    margin: 10px 0px 20px 0px;
    border-bottom: 1px solid black;
}
hgroup > h1{
    color:#FF0000;
}
p{
    text-indent:50px;
    text-align:justify;
    margin: 0px 5px;
}
nav {
    margin: 5px, 0px;
}

/*TOP WRAPPER*/
#topWrapper {
    /*border:1px solid #00ffff;*/
    background-color:#0d0d0d;
    text-align:center;
    position:fixed;
    z-index:9999;
    width:100%;
    max-width: 850px;
    margin: 0 auto; left:0px; right:0px;
    float:clear;
    background-image: url('bg5.jpg');    
}
#top_header{
    width: auto;
    height: 150px; /*change it back 200px*/
    /*border: 2px solid green;*/
    margin: 0px 0px;
    padding: 2px 0px;
    cursor:pointer;
    /*background-color: black;*/
    background: url('banner.png') no-repeat;
    background-size: 100% 100%;
}
#top_header > h1{
    padding: 20px 0px;
    vertical-align: middle;
}
#topnav{
    border-top: 1px solid yellow;
    border-bottom: 1px solid yellow;
}
#topnav  li{
    display:inline-block; 
    list-style:none;
    padding:0px 10px 9px 10px;
    color: yellow;
    margin: 2px 0px;
    -webkit-align-items:stretch;
    -moz-align-items:stretch;
}

/*Navigation Styles -- http://www.designzzz.com/coding/menu-css3-animated-transition-effect/ */
ul li {
    list-style: none;
    height: 44px;
    padding:10px 5px;
}
ul li a {
    width: 175px;
   ...