JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <ul id = "contact_menu">
        <li>
            <a href="mailto:[email protected]" target="_top">Email</a>
        </li>
        <li>
            <a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
        </li>
    </ul>
    <h1 id = "title"><span>Andrew</span> <span>Kennedy</span></h1>
    <ul id = "nav">
        <li>
            <a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
        </li>
        <li>
            <a href="http://www.google.ie/" target="_blank">Google</a>
        </li>
        <li>
            <a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
        </li>
        <li>
            <a href="http://www.bing.com/" target="_blank">Bing</a>
        </li>
    </ul>
</div>
<div id="main">
    <img src="http://placehold.it/500x300" />
</div>
<div id="footer"></div>

CSS

/* It is a good practice to use one of the reset css files.  
For more info see http://www.cssreset.com/ */

* {
    margin: 0;
    padding: 0;
}

/* Color code #fff is a valid abbreviation of #ffffff */

body {
    background-color: #fff;
}

/* There is really no need to wrap h1 tag in a div tag.  The h1, 
by default is a block element and you can just assign an id to it and 
access it directly. */

#title {
    background-color: #0f0;
    color: #000;
    /* font-weight, font-size, line-height, and font-family were 
    combined into font declaration */
    font: bold 45px/1.5 'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-align: center;
    letter-spacing: 5px;
    
    /* width of 100% is not necessary, because h1 is a block and 
    spans the entire width of its parent by default.  The margin 
    and padding of 0 were deleted also, because these are specified 
    in a mini-reset up top. */
}

/* Your first and last names were surrounded by span elements.  
To invoke ::first-letter pseudo-element on these, the spans are displayed 
as inline-block */

#title > span {
    display: inline-block;
}

#title > span::first-letter {
    color: #900;
}

/* Same as with h1, there is no need to wrap an unordered list in a div.  
The ul, by default, is also displayed as a block */

#contact_menu {
    background-color: #00f;
    list-style-type: none;
    text-align: right;
}

/* the list items are displayed as inline-blocks, which makes them stack 
horizontally while still allowing us to change their dimensions.  Unlike 
floats, inline-blocks will not break the structure and do not require 
clearing */

#contact_menu > li {
    display: inline-block;
}

#contact_menu > li > a {
    /* Anchors (a), by default, are inlines.  Changing their display 
    to block allows changing their dimensions. Instead of setting width 
    explicitly, the line-height and padding are used.  Anchors do not 
    take a line to themselves,...