JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Droid+Serif"></script>
 <header>
        <h1>sadman s.</h1>
    </header>

    <!--NAVIGATION BAR-->
    <nav>
        <ul>
            <li><a href="/code/index.html">h o m e</a></li>
            <li><a href="/code/blog.html">b l o g</a></li>
            <li><a href="/code/portfolio.html">p o r t f o l i o</a></li>
            <li><a href="/code/about.html">a b o u t</a></li>
            <li><a href="/code/contact.html">c o n t a c t</a></li>
        </ul>
    </nav>
    <!--NAVIGATION BAR ENDS-->

    <form>
        <label>Name</label>
        <input name="name" placeholder="Name">

        <label>Email</label>
        <input name="email" type="email" placeholder="Email">

        <label>Message</label>
        <textarea name="message" placeholder="Your message"></textarea>

        <input id="submit" name="submit" type="submit" value="SEND">
    </form>
    <!--FOOTER STARTS HERE-->
    <footer>
        <div id="footer_line"></div>

        <!--FOOTER LINKS BAR-->
        <nav>
            <ul>
                <li><a href="https://twitter.com/sadmanshawmik" target="blank"><span id="footer_bar">t w i t t e r</span></a></li>
                <li><a href="http://instagram.com/shawmikiki" target="blank"><span id="Span1">i n s t a g r a m</span></a></li>
                <li><a href="http://github.com/" target="blank"><span id="Span2">g i t h u b</span></a></li>
            </ul>
        </nav>
        <!--FOOTER BAR ENDS-->
        <p>copyright © 2014 - <span id="footer_link"><a href="/code/index.html">sadman.de</a></span>. all rights reserved.</p>

    </footer>

CSS

* {
            margin: 0;
            padding: 0;
            font-family: Droid Serif;
        }

        body {
            font-family: Droid Serif;
        }

        header {
            font-family: Droid Serif;
            font-weight: lighter;
            font-size: 1.8em;
            text-align: center;
            text-transform: uppercase;
            margin-top: 25px;
        }

        /*NAVIGATION BAR*/

        nav {
            position: relative;
            list-style: none;
            margin: 25px 0 40px 0;
            text-align: center;
            font-family: Droid Serif;
            text-transform: uppercase;
        }

            nav > ul > li {
                display: inline;
            }

                nav > ul > li > a {
                    display: inline-block;
                    padding: 0 32px 0 32px;
                    color: #000;
                    text-decoration: none;
                }

        a:hover {
            color: #00d8a3;
            text-decoration: none;
            -moz-transition: color 0.5s ease;
            -o-transition: color 0.5s ease;
            -webkit-transition: color 0.5s ease;
            transition: color 0.5s ease;
        }

        a:active {
            color: #00d8a3 !important;
            text-decoration: none;
        }

        /*BODY*/


        h2 {
            font-weight: 100;
            text-align: center;
            font-family: Droid Serif;
        }

        table {
            border: 2px;
            margin: -10px auto 15px auto;
        }

        td {
            padding: 20px;
        }

        table tr td img {
            -webkit-font-smoothing: antialiased;
            opacity: 1;
            -webkit-transition: opacity .3s ease-in-out;
            -moz-transition: opacity .3s ease-in-out;
            -o-transition: opacity .3s ease-in-out;
            transition: opacity .3s ease-in-out;
        }

            table tr td img:hover {
                opacity:...