JSFiddle - React, Tailwind, and code Playground

by James

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--  -->
<body>
<div class="gridcontainer">
    <div class="gridwrapper">
        <div class="gridbox gridheader">
            <div class="header">
<!-- A great place for the Quad Row Header Pills -->
                <h1>Quad Row Pills</h1>
<!-- Don't forget the drop down bar -->
                <h1>Drop down bar</h1>
            </div>
        </div>
        <div class="gridbox gridmenu">

            <!-- Stats -->
            
            <table>
    <tbody>
     <tr>
        <td>Attribute</td>
        <td>Max</td>
        <td>Current</td>
        <td>V</td>
    </tr>
    <tr>
        <td>Fight</td>
        <td></td>
        <td></td>
        <td>+</td>
    </tr>
    <tr>
        <td>Stealth</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Magic</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Talk</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>
            
            <!-- Stats -->
<table>
    <tbody>
    <tr>
        <td>Attribute</td>
        <td>Max</td>
        <td>Current</td>
        <td>V</td>
    </tr>
    <tr>
        <td>Health</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Endurance</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Strength</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Stamina</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Attack Speed</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Accuracy</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Speed</td>
        <td></td>
...

CSS

td {
    border: 1px solid #e9e9e9;
    font-size: .833em;
}

body {
    font-family: "Lucida Sans", Verdana, sans-serif;
}

.main img {
    width: 100%;
}

h1{
    font-size: .833em;
}

h2{
    font-size: 1.375em;
}

.header {
    padding: 1.0121457489878542510121457489879%;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
}

.menuitem {
    margin: 3%;
    margin-left: 0;
    margin-top: 0;
    padding: 3%;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
}

.main {
    padding: 3%;
}

.right {
    padding: 3%;
    background-color: #CDF0F6;
}

.footer {
    padding: 1.0121457489878542510121457489879%;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
    font-size: 0.625em;
}

.gridcontainer {
	width: 100%;
}

.gridwrapper {
	overflow: hidden;
    border: 1px solid;
    /*This borders the whole page*/
}

.gridbox {

    margin-right: 3%;
    float: left;
    border: 1px solid #e9e9e9;
}

.gridheader {
    width: 100%;
}

.gridmenu {
    width: 30%;
}

.gridmain {
    width: 30%;
}

.gridright {
    width: 30%;
    margin-right: 0;
}

.gridfooter {
    width: 100%;
    margin-bottom: 0;
}

@media only screen and (max-width: 500px) {
    .gridmenu {
        width: 100%;
    }

    .menuitem {
        margin: 3%;
        padding: 3%;
    }

    .gridmain {
        width: 100%;
    }

    .main {
        padding: 3%;
    }

    .gridright {
        width: 100%;
    }

    .right {
        padding: 3%;
    }

    .gridbox {
        margin-right: 0;
        float: left;
    }
}