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>
 <div class="container">
  <div class="masthead">
        <div class="container">
            <ul class="nav nav-pills nav-justified">
                <li class="active"><a href="#Canon0" data-toggle="pill">Canon 0</a></li>
                <li class=""><a href="#Canon1" data-toggle="pill">Canon 1</a></li>
                <li class=""><a href="#Canon2" data-toggle="pill">Canon 2</a></li>
                <li class=""><a href="#Canon3" data-toggle="pill">Canon 3</a></li>
                <li class=""><a href="#Canon4" data-toggle="pill">Canon 4</a></li>
                <li class=""><a href="#Canon5" data-toggle="pill">New Canon</a></li>
                
            </ul>
            <div class="tab-content">
                <div id="Canon0" class="tab-pane  active">
                    <h3>Section A</h3>
                <ul class="nav nav-pills nav-justified">
                <li class="active"><a href="#Canon0Age0" data-toggle="pill">Age 0</a></li>
                <li class=""><a href="#Canon0Age1" data-toggle="pill">Age 1</a></li>
                <li class=""><a href="#Canon0Age2" data-toggle="pill">Age 2</a></li>
                <li class=""><a href="#Canon0Age3" data-toggle="pill">Age 3</a></li>
                <li class=""><a href="#Canon0Age4" data-toggle="pill">Age 4</a></li>
                <li class=""><a href="#Canon0Age5" data-toggle="pill">Age 5</a></li>
            </ul>


                </div>
                <div id="Canon1" class="tab-pane">
                    <h3>Section B</h3>
                <ul class="nav nav-pills nav-justified">
                <li class="active"><a href="#Canon1Age0" data-toggle="pill">Age 0</a></li>
                <li class=""><a href="#Canon1Age1" data-toggle="pill">Age 1</a></li>
                <li class=""><a href="#Canon1Age2"...

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;
    }
}