JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<div id="header">
    THIS IS THE HEADER LOL
</div>
<div id="menu">
    <a href="#" onclick="doNav('home.php');return false;">Home</a>
    <a href="#" onclick="doNav('about.php');return false;">About</a>
    <a href="#" onclick="doNav('faq.php');return false;">FAQ</a>
    <a href="#" onclick="doNav('sitemap.php');return false;">Sitemap</a>
</div>
<div id="content">
    <p>
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et orci  nibh. Curabitur commodo placerat sem, vel rutrum nibh lacinia lacinia.  Sed tempor placerat gravida. Nulla facilisi. Proin dignissim quam quis  massa rhoncus egestas gravida augue hendrerit. In hac habitasse platea  dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Etiam sed tellus massa. Morbi ut metus  odio. Nullam tortor turpis, luctus dictum malesuada in, commodo quis  nisl. Morbi facilisis congue euismod. Mauris at pellentesque lorem. Sed  quis eros augue. Aenean sed diam lacus. 
    </p>
    <p>
        Mauris ac arcu tortor, et egestas erat. Phasellus tincidunt lacinia  arcu, quis ornare diam interdum in. In tincidunt turpis in ante varius  et porttitor nibh tempus. Sed cursus arcu id elit molestie sit amet  hendrerit elit posuere. Aliquam pellentesque nunc eu risus cursus porta.  Maecenas feugiat nisl et odio ullamcorper consequat. Etiam neque leo,  euismod a consectetur in, faucibus vitae sapien. Pellentesque pharetra  volutpat euismod. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos himenaeos. Etiam vitae laoreet enim.  Curabitur in elementum libero. Suspendisse gravida nisl ligula. In at  est a tortor venenatis ullamcorper. Etiam pellentesque, sem ac pretium  consequat, lacus mi fermentum ante, sit amet elementum diam lorem vitae  dolor. Curabitur sed lorem diam. Pellentesque ac odio mi, sit amet  eleifend est. Nullam non nisi sed turpis luctus congue id tincidunt  elit. Duis tincidunt est aliquam leo bibendum in...

CSS

body {
    background: #333;
    padding: 7px;
}
#header {
    font-size: 28px;
    font-family: verdana;
    font-weight: bold;
    background: #000;
    color: #FFF;
    padding: 3px;
    border: solid 1px #F00;
    text-align: center;
}
#menu {
    font-size: 15px;
    font-family: verdana;
    background: #200;    
    margin-top: 3px;
    padding: 8px;
    border: solid 1px #F00;
    text-align: center;
}
#menu a {
    border: solid 1px #400;
    padding: 4px;
    color: #F00;
    text-decoration: none;
}
#menu a:hover {
    background: #500;
    color: #FFF;
    border-color: #800;
}
#content {
    background: #000;
    color: #FFF;
    border: solid 1px #777;
    margin-top: 3px;
    padding: 5px;
    font-size: 13px;
    font-family: verdana;
}
#content p {
    margin-bottom: 15px;
}

JavaScript

function doNav(filename) {
    $('#content').load(filename, function(responseText, textStatus){
        if(textStatus == 'error')
        {
                $('#content').html('Something went wrong while trying to load the page.');
        }
    });
}