JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
  <div id="width">
    <div id="width-inner" class="clearfix">
      ...
    </div>
  </div>
</div> <!-- /#navigation /#width /#width-inner -->

<div id="page">
  <div id="width">
    <div id="width-inner">

      <div id="header" class="clearfix">
        <div id="branding">
          ...
        </div> <!-- /#branding -->
      </div> <!-- /#header -->

      <div id="main-columns">
        <div id="main-columns-inner">

          <div id="main-wrapper">
            <div id="main">
              <div id="main-content">
                <div id="content" class="clearfix">
                  ...
                </div> <!-- /#content -->
                <div id="secondary-menu">
                  ...
                </div> <!-- /#secondary-menu -->
              </div> <!-- /#main-content -->
            </div>
          </div> <!-- /#main-wrapper /#main -->

          <div id="sidebar-first" class="clearfix">
            ...
          </div> <!-- /#sidebar-first -->

          <div id="sidebar-second" class="clearfix">
            ...
          </div> <!-- /#sidebar-second -->

        </div>
      </div> <!-- /#main-columns-inner /#main-columns -->
    </div>
  </div>
</div> <!-- /#page /#width /#width-inner -->

<div id="footer-wrapper">
  <div id="footer">
    <div id="width">
      <div id="width-inner" class="clearfix">
        ...
      </div>
    </div>
  </div>
</div><!-- /#footer-wrapper /#footer /#width /#width-inner -->

CSS

/**
 * Layout - fluid layout with min and max widths.
 */
#main-menu,
#page,
#footer {
  margin: 0 auto;
  min-width: 960px;
  max-width: 1200px;
  width: 85%;
}
#main-wrapper,
#sidebar-first,
#sidebar-second {
  float: left; /* LTR */
  display: inline;
}
.two-sidebars #main {
  margin-right: 50.5%;  /* LTR */
}
.sidebar-first #main {
  margin-right: 26.25%;  /* LTR */
}
.sidebar-second #main {
  margin-right: 26.25%;  /* LTR */
}
#sidebar-first {
  width: 24.25%;
  margin-left: -49.5%;  /* LTR */
}
#sidebar-second {
  width: 24.25%;
  margin-left: -25.25%;  /* LTR */
}
.sidebar-first #sidebar-first {
  width: 24.25%;
  margin-left: -25.25%;  /* LTR */
}
#main-content,
#main-columns {
  display: inline-block;
  width: 100%;
}
#page > #main-columns,
#main > #main-content {
  display: block;
}
#main-columns {
  clear: both;
}
#main-wrapper {
  width: 100%;
  clear: both;
}
#sidebar-first .region,
#sidebar-second .region {
  padding: 0 15px 0 12px;
}
/* Mobile */
@media only screen and (max-device-width: 480px) {
  #navigation,
  #header,
  #main {
    width: 100%!important;
  }
}

/* RTL stylesheet */
#main-wrapper,
#sidebar-first,
#sidebar-second {
  float: right;
}
.two-sidebars #main {
  margin-left: 50.5%;
  margin-right:0;
}
.sidebar-first #main{
  margin-left: 25.25%;
  margin-right: 0;
}
.sidebar-second #main {
  margin-left: 25.25%;
  margin-right: 0;
}
#sidebar-first {
  width: 24.25%;
  margin-right: -49.5%;
}
#sidebar-second {
  width: 24.25%;
  margin-right: -24.25%;
}
.sidebar-first #sidebar-first{
  width: 24.25%;
  margin-right: -24.25%;
}
#sidebar-first,
#sidebar-second {
  z-index: 900;
}

/* IE6 stylesheet */
#width,
#width-inner {
  height: 0;
}
#width {
  border-left: 960px solid #fbfcfd;
}
#width-inner {
  margin-left: -960px;
  position: relative;
}