JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" class="container_16"> 
            <div id="title" class="grid_16"> 
                <img src="images/bingo.png" alt="bingo header" />
            </div> 
            <div id="menu" class="grid_3">
                <ul>
                    <li><a href="index.aspx">Home</a></li>
                    <li><a href="exercise1.aspx">Exercise 1</a></li>
                    <li><a href="exercise2.aspx">Exercise 2</a></li>
                    <li><a href="exercise3.aspx">Exercise 3</a></li>
                    <li><a href="exercise4.aspx">Exercise 4</a></li>
                    <li><a href="#">Exercise 5</a></li>
                    <li><a href="exercise6.aspx">Exercise 6</a></li>
                    <li><a href="exercise7.aspx">Exercise 7</a></li>
                    <li><a href="exercise8.aspx">Exercise 8</a></li>
                </ul>
            </div>

            <div id="content" class="grid_13">
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>
            </div>


    </div>

CSS

#title, #menu, #footer {
   background-color: #0174DF;
   color: #fff;
    position: relative;
}

#menu
{
    margin: 0 auto;
    width: 800px;
    position: relative;
    height: auto;
    overflow: hidden;
}

#menu li
{
display: inline;
list-style-type: none;
}

#menu a { padding: 3px 10px; }

#menu a:link, #menu a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#menu a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

#footer {
    text-align: center;}