JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.min.css">
<body>
  <header>
    <div class="row">
      <div id="logo" class="small-3 columns">
        <a href="#">
          <img src="logo" alt="App logo" />
        </a>
      </div>

      <nav id="top-navigation" class="small-9 columns">
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <div class="row">
      <section class="small-3 columns" id="sidebar-section">
        <p>Sidebar</p>
      </section>
      <section class="small-9 columns" id="content-section">
        <p>Content</p>
      </section>
    </div>
  </main>

  <footer>
    <nav>
        <p>Here I’d like to put my footer</p>
    </nav>
  </footer>
</body>

SCSS

$header-bg: #ADDF1D;
$sidebar-bg: #f7f7f7;
$content-bg: #fff;
$footer-bg: #594F4F;

body{
  background: image-url('layout/bg.jpg');
}
header{
  height: 80px;
  background-color: $header-bg;
  line-height: 80px;
}

main{
}

#sidebar-section{
  background-color: $sidebar-bg;
  border-right: 1px dashed #cacaca;
}

#content-section{
  background-color: $content-bg;
}
footer{
  height: 80px;
  background-color: $footer-bg;
}