JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="col-md-12 bg-light-gray">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="section-heading"><dnn:TITLE runat="server" id="dnnTITLE" />Example light-gray</h2>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12 text-center">
      <div id="ContentPane" runat="server" />
    </div>
  </div>
</section>
<section class="col-md-12 bg-light-blue">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="section-heading"><dnn:TITLE runat="server" id="dnnTITLE" />Example light-blue</h2>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12 text-center">
      <div id="ContentPane" runat="server" />
    </div>
  </div>
</section>
<section class="col-md-12 bg-dark-gray">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="section-heading"><dnn:TITLE runat="server" id="dnnTITLE" />Example dark-gray</h2>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12 text-center">
      <div id="ContentPane" runat="server" />
    </div>
  </div>
</section>
<section class="col-md-12 bg-dark-blue">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2 class="section-heading"><dnn:TITLE runat="server" id="dnnTITLE" />Example dark-blue</h2>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-md-12 text-center">
      <div id="ContentPane" runat="server" />
    </div>
  </div>
</section>

CSS

section
{
  padding-top: 15px;
  padding-bottom: 25px;
}

.bg-light-gray
{
    background-color:lightgray;
    color: #000;
}
.bg-light-blue
{
    background-color:lightblue;
    color: #000;  
}
.bg-dark-gray
{
    background-color:darkgray;
    color: #fff;
}
.bg-dark-blue
{
    background-color:darkblue;
    color: #fff;  
}