JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Nav Bar -->
<div id="nav">
    <div id="nav-wrapper">
        <ul>
            <li><a href="#">item #1</a>
            </li>
            <li><a href="#">item #2</a>
            </li>
            <li><a href="#">item #3</a>
            </li>
            <li><a href="#">item #4</a>
            </li>
            <li><a href="#">item #5</a>
            </li>
        </ul>
    </div>
</div>
<!-- Box 1 -->
<div id="wrapper">
    <div id="content" style="margin-top: 75px">
        <div id="page-wrap">
            	<h2 style='font-weight:200' class="transtext">
		Top 5 Colors
		</h2>

            <table>
                <tr>
                    <mark class="monotext red markhover">#FF4040</mark>
                </tr>
                <tr>
                    <mark class="monotext green markhover">#4AA02C</mark>
                </tr>
                <tr>
                    <mark class="monotext yellow markhover">#FFA62F</mark>
                </tr>
                <tr>
                    <mark class="monotext purple markhover">#893BFF</mark>
                </tr>
                <tr>
                    <mark class="monotext brown markhover">#835C3B</mark>
                </tr>
            </table>
        </div>
    </div>
</div>
<!-- Box 2 -->
<div id="wrapper">
    <div id="content">
        <div id="page-wrap">
            	<h2 style='font-weight:200' class="transtext">
		Top 5 Operating Systems
		</h2>

            <ol>
                <li class="transtext">elementaryOS</li>
                <li class="transtext">Ubuntu 14.04</li>
                <li class="transtext">ArchLinux</li>
                <li class="transtext">Linux Mint</li>
                <li class="transtext">Zorin OS</li>
            </ol>
        </div>
    </div>
</div>l>

CSS

@font-face {
    font-family:"Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family:"Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family:"Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family:"Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family:"Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family:"Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family:"Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}
body {
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    font-size: 16px;
    background-color: #E5E5E5;
    height: 2000px;
    font-family:'Segoe UI';
}
#nav {
    position: fixed;
    background-color: #222;
    opacity: 1;
    width: 100%;
    top: 0;
    z-index: 99999;
}
#nav-wrapper {
    width: auto;
    margin: 0 auto;
    text-align: center;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#nav ul li {
    display: inline-block;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    transition: .25s;
}
#nav ul li:hover {
    background-color: #444;
}
#nav ul li a, visited {
    color: #CCC;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    transition: .25s;
    opacity: 0.5;
}
#wrapper:hover {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    opacity: 1;
}
#content {
    background-color: #FFF;
    padding: 10px;
    margin: 10px 0 0 0;
}
article, aside, figure, footer, header, hgroup, menu, nav, section {
    display:...