JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
        <div id="header_border"></div>
        <!--<div id="menu">MENU</div>-->
    </header>
    <section id="front_page" class="page">
        <section class="sect_container">
            <div class="sect_title">Design Assets</div>
            <ul id="row">
                <li id="logos" style="background-color:#39F;">
                    <div class="link">Logos</div>
                </li>
                <li id="patterns" style="background-color:#39F;">
                    <div class="link">Patterns</div>
                </li>
                <li id="motifs" style="background-color:#39F;">
                    <div class="link">Motifs</div>
                </li>
                <li id="lettering" style="background-color:#39F;">
                    <div class="link">Lettering</div>
                </li>
            </ul>
            <ul id="row">
                <li id="characters" style="background-color:#39F;">
                    <div class="link">Characters</div>
                </li>
                <li id="objects" style="background-color:#39F;">
                    <div class="link">Objects</div>
                </li>
                <!--<li id="case-studies" style="background-color:#39F;"><div class="link">Characters</div></li>
                <li id="silk-screening" style="background-color:#39F;"><div class="link">Silk Screening</div></li>-->
            </ul>
        </section>
        <section class="sect_container">
            <div class="sect_title">Collateral Design</div>
            <ul id="row">
                <li id="logos" style="background-color:#39F;">
                    <div class="link">Business Cards</div>
                </li>
                <li id="patterns" style="background-color:#39F;">
                    <div class="link">Product Labels</div>
                </li>
                <li id="motifs" style="background-color:#39F;">
                    <div class="link">Banners</div>
                </li>
         ...

CSS

@charset"utf-8";

/* CSS Document */

/*MAIN ELEMENTS*/
 body {
    width:100%;
    height:100%;
    /*width:1266px; height:612px;*/
    background-color:#161616;
    background-image:url(http://www.optiqvision.x10host.com/Pics/Background.png);
    /*background-position:top 40px center;*/
    background-position:50% 11px;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    margin:auto;
    position:relative;
    display:block;
    /*top:40px;*/
    z-index:1;
}
header {
    width:100%;
    height:auto;
    position:fixed;
    top:0;
    margin:auto;
    z-index:4;
}
footer {
    width:100%;
    height:auto;
    margin:auto;
    z-index:4;
}
/*DECORATIVE ELEMENTS*/
 #header_border {
    width:100%;
    height:40px;
    margin:auto;
    background-image:url(http://www.optiqvision.x10host.com/Pics/header.png);
    background-repeat:repeat-x;
    background-color:#960;
    /*background-size:100%;*/
}
ul
{
    padding: 0;
    margin: 0;
}
#footer_border {
    width:100%;
    height:40px;
    margin:auto;
    background-image:url(http://www.optiqvision.x10host.com/Pics/footer.png);
    background-repeat:repeat-x;
    background-color:#960;
    /*background-size:100%;*/
}
/*#menu{
	width:auto;
	height:auto;
	padding:11px;
	font-family:'Roboto', sans-serif;
	background-color:#333;
	color:#999;
	display:none;
	float:left;
	margin:11px 0 0 4px;
	}
	@media (max-width:600px){
		#menu{display:block;}
		}*/
 .page {
    width:88%;
    height:auto;
    overflow:hidden;
    background-color:rgba(255, 255, 255, .44);
    border-radius:22px;
    margin:88px auto;
}
#row {
    width:77%;
    overflow:hidden;
    margin:11px auto;
    display:block;
    clear:both;
}
#row li {
    width:20%;
    height:120px;
    float:left;
    text-align:center;
    display:block;
    font-family:'Roboto', sans-serif;
    font-size:16pt;
    border-radius:6.5px;
    margin:0 2% 0 2%;
    list-style:none;
    position:relative;
}
.sect_container {
   ...