JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>RPG Game</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/main.js" type="text/javascript"></script>
</head>
<body onLoad="initMain()">
<div id="containGame">
    <div id="containCanMain">
    <!--Canvas-->
    <canvas id="canMain">
        <p>UPGRADE YOUR NETTERWEB!</p>
    </canvas>
    </div>
    <!--Menu-->
    <div id="menuMain">
        <ul> 
        <!--Replace menu items with images, for accuracy scaling-->
        <li class="menuItemMain"><a href="#">Menu</a></li>
        <li class="menuItemMain"><a href="#">Inventory</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>

        </ul> 
    </div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
a{
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
}
h1{
    line-height: 0px;
}
body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#containGame
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #999;
    overflow: hidden;
}

/* Landscape */
@media all and (orientation:landscape) {
#containCanMain
{
    float: left;
    width: 75%;
    height: 100%;
    outline: 0px solid #000;
}
#menuMain
{
    float: right;
    width: 25%;
    top: 0%;
    height: 100%;
    border: 0px solid #000;
    background: #666;
    font-size: 2em;
    font-family: sans-serif;
}
#menuMain ul{
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #444;
    border-left: 1px solid #000;
}
#menuMain ul li{
    height: 20%;
    width: 100%;
    list-style: none;
    border-bottom: 1px solid #000;
    position: relative;
}
#menuMain ul li a{
text-align: center;
position:absolute;
left: 0px;
top:50%;
margin-top:-0.7em;
width: 100%;
}
}

/* Portrait */
@media all and (orientation:portrait) {
#containCanMain
{
    width: 100%;
    height: 80%;
    outline: 0px solid #000;
}
#menuMain
{
    width: 100%;
    height: 20%;
    border: 0px solid #000;
    background: #444;
    font-size: 2em;
    font-family: sans-serif;
}
#menuMain ul {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #444;
    border-top: 1px solid #000;
}
#menuMain ul li {
    float: left;
    height: 100%;
    width: 20%;
    list-style: none;
    background-color: #333;
    position: relative;
    outline: 1px #000 solid;
}
#menuMain ul li a{
text-align: center;
position:absolute;
left: 0px;
top:50%;
margin-top:-0.7em;
width: 100%;
height: 100%;

}
}

JavaScript

function initMain() {
    var canMain = document.getElementById("canMain");
    if(canMain.getContext) {
        var ctxMain = canMain.getContext('2d');
        ctxMain.fillRect(25,25,100,100); 
    }
}