JSFiddle - React, Tailwind, and code Playground

by Jonathan McGlone

HTML

<nav>
    <ul>
        <li><a href="/">Home</a>
        </li>
        <li><a href="/about">About</a>
        </li>
        <li><a href="/cv">CV</a>
        </li>
        <li><a href="/blog">Blog</a>
        </li>
    </ul>
</nav>
<div class="container">
    <div class="blurb">
        
<h1>Hi there, I'm Harry Lime!</h1>

        <p>I'm best known as the character from <em>The Third Man</em> who faked his death and led his childhood friend Holly Martins on a mad chase through Vienna. <a href="/about">Learn more about me...</a>
        </p>
    </div>
</div>
<footer>  
    <ul>  
        <li><a href="mailto:[email protected]">email</a>
        </li>  
        <li><a href="https//github.com/harry-lime">github.com/harry-lime</a>
        </li>  </ul>  </footer>

CSS

body {
    margin: 60px auto;
    width: 70%;
}
nav ul, footer ul {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    padding: 0px;
    list-style: none;
    font-weight: bold;
}
nav ul li, footer ul li {
    display: inline;
    margin-right: 20px;
}
a {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 3em;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
p {
    font-size: 1.5em;
    line-height: 1.4em;
    color: #333;
}
footer {
    border-top: 1px solid #d5d5d5;
    font-size: .8em;
}