JSFiddle - React, Tailwind, and code Playground

by Ethan Hammond

HTML

<body bgcolor="#a8a8a8">
    <header class="bar">
        <nav>
            <li>	<a href="../index.php" class="about" id="mp-blog" style="width: 33.33333333333333%;"><span><font face="Arial";>Home</font></span></a>

            </li>
            <li>	<a href="../checkout" class="light" id="mp-theme" style="width: 33.33333333333333%;"><span><font face="Arial";>Checkout</font></span></a>

            </li>
            <li>	<a href="../submenu/popsearch.php" class="light" id="mp-theme" style="width: 33.33333333333333%;"><span><font face="Arial";>Search</font></span></a>

            </li>
        </nav>
    </header>

CSS

/* DarkMoonCSS by Ethan_Hammond. */

/* Headers */
header.bar {
background: #333;
font-size: large;
white-space: nowrap;
position: fixed;
left:0px;
right:0px;
width: 100%;
height: 8%;
top: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #071ed0;
overflow: hidden;
z-index: 999;
}
header.bar ul { 
display: block;
}
header.bar li {
display: inline;
line-height: 50px;
text-align: center;
margin-left: 0px;
margin-right: 0px;
}
header.bar li a {
transition:0.5s ease-in-out;
height: 100em;
text-align: center; 
display: inline-block;
margin: auto;
position: relative; 
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; 
color: #00BAFF;
}
header.bar li a span {
margin: auto; 
text-align: center; 
display: inline-block;  
font-size: 8;
}
header.bar li a:hover {
background: rgb(45, 125, 220); 
transition:0.5s ease-in-out; 
color: white; -webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out; 
Font-Size: 5;
}
header.bar li a.active {
transition:0.5s ease-in-out; 
-webkit-transition: all 0.5s ease-in-out; 
-moz-transition: all 0.5s ease-in-out;
}

header.banner {
margin-top: 6%;
width: 400px;
height: 100px;
margin-left: auto;
margin-right: auto;
border: 0;
outline: none;
}
header.banner img {
width: 100%;
height: auto%;
}

/* Body */
article.tables {
text-align: center; 
overflow: hidden; 
position: relative;
margin-left: 7%;
margin-right: 7%;
margin-top: auto;
border: 0;
outline: none;
display: block;
text-align: center;
}
article.tables h1 {
color: #fff;
}
p.sidenote {
text-align: left;
font-size: small;
color: white;
}

/* Tables */
table.moon {
text-align: center; 
border-collapse:collapse;
background-image: url('../images/bluestripgrad.png');
text-align: center; 

}
table.moon thead th {
background:#333 url('../images/blackish.gif') repeat-x;
color:#fff;
text-align: center;
height: 54px
}
table.moon tbody th, tbody td {
border-bottom: solid 1px #fff;
color: #333;
font-size:...