JSFiddle - React, Tailwind, and code Playground

by southerd

HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>Mom's Basement</title>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <script src="jquery.js"></script>
    </head>
    <body>
        <div id="header">
            <ul id="menu">
                <li><a id="goober" href="">About</a></li>
                <li><a href="">Status</a></li>
                <li><a href="">Enroll</a></li>
                <li><a href="games.html">Games</a></li>
                <li><a href="">Lessons</a></li>
                <li><a href="details.html">Details</a></li>
            </ul>
        </div>
        <div id="content">
            <p>Content</p>
        </div>
    </body>
</html>

CSS

body
{
    margin: 0;
    padding: 0;
}

a
{
    margin: 0;
    padding: 0;
}

#header, #header a:link, #header a:visited 
{ 
    background-color: black; 
    color:white; 
    text-align: center;
    text-decoration: none; 
    text-transform: uppercase;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;

    vertical-align: top;
    margin: 0px;
    padding: 0px;
    border: 0px;
}

#header a:hover { text-decoration: underline; }
#goober { color: red; }

#content 
{ 
    background-color: red; 
    margin: 0px;
    padding: 0px;
    border: 0px;
    height: 50px;
}

li {
    display: inline;    }