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" />
                
                <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        </head>
    <body id="dontchangeme"><!--Opening body tage as to where code will begin-->
        <section id="box">
            <header>
                <hgroup>
                <h1>HI,</h1>
                <h3>IM DAMIEN O'BRIEN</h3>
                <h5>A SPACE CAPTIN COMPUTER GEEK</h5>
                </hgroup>
                
                    <p id="headscriptn">Final site Template For the University of Tasmania Web Development</p>
                    <hr/>
                <nav>
                    <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="descbox"><span id="eye">I</span> AM A <span id="web">WEB</span> &amp; <span id="graphic">GRAPHIC</span> <span id="designer">DESIGNER</span></p>
                                    
                <article id="leftfloat">
                <aside>
                </aside>
                <p>Welcome to my Blog, My Name is Damien O'Brien I am currently undertaking my bachelors of 
                computing at the University of Tasmania, I am a freelance web and graphic designer with a passion
                for pushing the limits of what can be done, with a passion for the internet and the way it works
         ...

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: 'descbox';
    src: url('fonts/3.ttf');
}
/*CUSTOM FONTS*/

#dontchangeme{/*Window frame*/
    border:black 5px solid;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04b0bf', endColorstr='#323131'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#04b0bf), to(#006ea7)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #04b0bf,  #323131); /* for firefox 3.6+ */ 
}

hgroup{
    color:white;
    line-height:5px;
    font-family:'heading',Sans-Serif;
    text-shadow:1px -1px  3px black, -2px -2px black, -2px -3px black, -2px -4px black, -2px -5px 2px yellow;
    font-size:25px;
}

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



#box{/*Content Frame*/
    width:800px;
    height:700px;
    opacity:1;
    margin:auto;
}


#headscriptn{/*Text above horizontal rule*/
    text-align:right;
    color:white;
    font-family:'body',Sans-Serif;
    width:800px;
    margin-bottom:-12px;
}


nav ul{/*Navagation Bar*/
        text-align:right;
        padding-right:20px;
        color:white;
        margin-top:-10px;
}

nav ul li{/*Navagation Bar*/
    list-style-type: none;
    display: inline;
    padding:20px;
    text-align:center;
    font-family:monospace;
}

#descbox {
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.10);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000, endColorstr=#10000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#10000000, endColorstr=#10000000)";
    width:815px;
    font-family:'descbox' ,sans-serif;
    font-size:75px;
    margin-top:30px;
   ...