JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" ><!--Defines what content is in the page-->
            <title>Page Name</title><!--Title bar Name-->
            <link type="text/css" rel="stylesheet" href="style.css" /><!--Imported CSS File-->
                                <script src="http://widgets.twimg.com/j/2/widget.js"></script>
                                <script src="http://connect.facebook.net/en_US/all.js#appId=221655007887373&amp;xfbml=1"></script>
    </head>

    <body id="body-of-site"><!--Opening body tage as to where code will begin-->
        <section id="section-body">
            <header>
                <hgroup><!--Heading Group Box-->
                    <h1>HI,</h1>
                    <h3>I'M DAMIEN O'BRIEN</h3>
                    <h5>A SPACE CAPTAIN COMPUTER GEEK</h5>
                </hgroup>

                <hr/><!--Cheap Style =p-->
                
                <nav><!--Navagation Menu-->
                    <ul>
                        <li><button type="button">Who am i</button></li>
                        <li><button type="button">Skills</button></li>
                        <li><button type="button">Resume</button></li>
                        <li><button type="button">Contact</button></li>
                        <li><button type="button">Blank</button></li>
                    </ul>
                </nav>

                <p id="feature-text"><span id="eye">I</span> AM A <span id="web">WEB</span> &amp; <span id="graphic">GRAPHIC</span> <span id="designer">DESIGNER</span></p><!--Feature Text-->
            <section id="javaframe">
                <article id="About-me-content-area">
                    <aside>
                    <!--Content Area|-Face Image|- Loaded with CSS-->
                    </aside>
                    
                    <p>Welcome to my Blog, My Name is Damien O'Brien, I am currently undertaking my bachelor of 
       ...

CSS

/************CUSTOM FONTS*********************/
/** Generated by FG **/
@font-face{
    font-family: 'heading';
        src: url('fonts/1.ttf');
    font-weight: normal;
    font-style: normal;    
}
@font-face{
    font-family: 'body';
        src: url('fonts/2.ttf');
}
@font-face{
    font-family: 'feature-text';
        src: url('fonts/3.ttf');
}


/***************BODY OF SITE*****************************/
#body-of-site{/*Window frame*/
    margin:0;
        background: #999; /* for non-css3 browsers */
        background: -webkit-gradient(linear, left top, left bottom, from(#04b0bf), to(#006ea7)); /* for webkit browsers */
        background: -moz-linear-gradient(top,  #04b0bf,  #006ea7); /* for firefox 3.6+ */ 
}

#section-body{
    border:solid 2px red;
}

#javaframe{
    border:solid 2px orange;
}



/*************HEADINGS********************/
hgroup{
    border:solid transparent 2px;/*Weired Header Bug Fix*/
    padding-left:4px;
    margin-top:-5px;
    
    height:150px;/*Fixes weired footer bug?? background showed through*/
    width:500px;
    color:white;
    
    line-height:5px;
    font-size:20px;
    font-family:'heading',Sans-Serif;
    text-shadow:1px -1px  3px black,
                    -1px -1px 0px black,
                        -1px -1px 1px yellow,
                            -1px -1px 2px yellow;
}

h1{
    font-size:40px;
    color:black;
    text-shadow:1px 1px 3px black,
                    -2px -1px  0px black,
                        1px 2px  1px green;
}

h3{
    margin-top:-8px;
    margin-bottom:-8px;    
    
    font-size:40px;
    color:black;
    text-shadow:1px 1px 3px black,
                    -2px -1px  0px black,
                        1px 2px  1px red;
}


/************PARAGRAPHS*********************/
p{
    color:black;
    font-family:'body',Sans-Serif;
    font-size:12px;
}


/*************NAVAGATION BAR********************/
nav ul{/*Navagation Bar*/
        margin-top:-10px;
        padding-right:20px;
       ...