JSFiddle - React, Tailwind, and code Playground

HTML

<title>Home</title>
<body>
    <div id="container">
        <div id="header">
            <img src="header.jpg" height="100px" width="200px" />
        </div>
        	<h1 class="head">Critical&nbsp;Ratings</h1>

        <div id="line"></div>
        <navi id="tumblr"><a href="#"><img src="tbtn.png" height="30px" width="50px">Tumblr</img></a>
        </navi>
        <navi id="facebook"><a href="#"><img src="fbbtn.png" height="30px" width="50px"></img></a>
        </navi>
        <navi id="navigation">
            <ul>
                <li><a href="#">TV Shows</a>
                </li>
                <ul>
                    <li><a href="#">The Walking Dead</a>
                    </li>
                    <li><a href="#">Grimm</a>
                    </li>
                </ul>
                <li><a href="#">Movies</a>

                    <ul>
                        <li><a href="#">Action</a>

                            <li><a href="#">Comedy</a>
                            </li>
                            <li><a href="#">Thriller</a>
                            </li>
                    </ul>
            </ul>
        </navi>
        <section id="content">
            	<h1>Test Section</h1>

            <p>some text blablablasdfasdfsadfs ffffffffffffffffffffdfwerweddddddddlets see how this will breakasddddddd dddddd ddd ddd ddd d ddd dd dddd dddddd ddddd ddd dddddddd d ddd dd dddd ddddddd ddddddddddddd dddddddddd ddddddd ddddddddddddddd</p>
        </section>
        <div id="footer"></div>
    </div>
</body>

</html>

CSS

/******* Standard css reset and font setting ********/
 * {
    padding:0;
    margin:0;
    font-family:'HELVETICA', times new roman, serif;
}
/******* Grand-Parent to determine the websites side and content layout**********/
 #container {
    border: 1px solid red;
    width:70%;
    height: 800px;
    margin: 0 auto;
}
/******* Title, Websites Name ******/
 .head {
    position:relative;
    margin: 0px 38%;
    font-size: 2.5em;
    border-radius:10px;
    /*border:1px solid black;*/
    color: red;
    text-shadow: 0 1px 0 red, 0 2px 0 red, 0 3px 0 #777777, 0 4px 0 #666666, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px rgba(100, 0, 0, 0.4), 0 9px 10px rgba(100, 0, 0, 0.2);
    overflow:hidden;
    -webkit-animation:trans 4s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -moz-animation:trans 4s;
    animation:trans 4s;
    animation-fill-mode: forwards;
    z-index:-10;
}
/****** Line just for design purpose ******/
 #line {
    border: 1px solid black;
    top:50px;
    position: relative;
    margin:0 auto;
}
/***** Logo  ******/
 #header {
    float:left;
    position: relative;
    top: 50px;
    left: 100px;
    border: 1px solid black;
    z-index: 30;
}
/***** Links to follow me *****/
 #tumblr {
    border: 2px solid white;
    position: relative;
    top: 0px;
    left: 50px;
}
#tumblr img {
    position: relative;
    top: 10px;
    left: 0px;
}
#tumblr:hover {
    position: relative;
    top: 0px;
    left: 50px;
    border-color: red;
    border-style: dotted solid;
    border: dotted solid;
    border-radius: 5px;
}
#facebook {
    position: relative;
    border: 3px solid white;
    width: 50px;
    min-height:50px;
    top: 0px;
    left: 60px;
}
#facebook:hover {
    border-color: red;
    border-style: dotted solid;
    border: 5px dotted solid;
    border-radius: 5px;
    width: 50px;
    height:30px;
    position: relative;
    top: 0px;
    left: 60px;
}
#facebook img {
    position:...