JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body>
<div class='container'>
<div class='row'>
<div class='col-md-12 panel' id='gameplay-title'>Title</div>
</div>
<div class='row'>
<div class='col-md-6 col-md-offset-3 panel' id='gameplay-scoreboard'>Scoreboard</div>
</div>
<div class='row'>
<div class='col-md-3 panel' id='gameplay-away-team'>Away Team</div>
<div class='col-md-6 panel' id='gameplay-baseball-field'>Baseball Field</div>
<div class='col-md-3 panel' id='gameplay-home-team'>Home Team</div>
</div>
<div class='row'>
<div class='col-md-6 col-md-offset-3 panel' id='gameplay-at-bat'>At Bat</div>
</div>
<div class='row'>
<div class='col-md-6 col-md-offset-3 panel' id='gameplay-game-report'>Game Report</div>
</div>
</div>
</body>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
color: white;
}
#gameplay-title {
background-color: blue;
height: 60px;
border: solid 1px black;
}
#gameplay-scoreboard {
background-color: green;
height: 60px;
border: solid 1px black;
}
#gameplay-away-team {
background-color: yellow;
color: black;
height: 60px;
border: solid 1px black;
}
#gameplay-baseball-field {
background-color: red;
height: 60px;
border: solid 1px black;
}
#gameplay-home-team {
background-color: purple;
height: 60px;
border: solid 1px black;
}
#gameplay-at-bat {
background-color: orange;
height: 60px;
border: solid 1px black;
}
#gameplay-game-report {
background-color: grey;
height: 60px;
border: solid 1px black;
}