JSFiddle - React, Tailwind, and code Playground

by nicolas_canfrere

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="wrapper">
  <div class="header">
    <h1>I'am the header</h1>
  </div>
  <div class="body">
    <div class="sidebar">I'am the sidebar</div>
    <div class="content">
      <div class="container-fluid text-center">
      <div class="row">
        <div class="col-md-12">
          <div class="page-header">
            <h1>I'am the content</h1>
          </div>
        </div>
      </div>
        <div class="row">
          <div class="col-md-4">body content col 1</div>
          <div class="col-md-4">body content col 2</div>
          <div class="col-md-4">body content col 3</div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="container text-center">
      <div class="row">
        <div class="col-md-4">col 1</div>
        <div class="col-md-4">col 2
          <br> I'am the footer</div>
        <div class="col-md-4">col 3</div>
      </div>
    </div>
  </div>
</div>

SCSS

body {
  font-family: Arial, sans-serif;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
  background-color: #444;
  color: #fff;
  height: 200px;
}

.header h1 {
  font-size: 25px;
  text-align: center;
  width: 100%;
}

.body {
  flex-grow: 1;
  display: flex;
}

.sidebar {
  background-color: #666;
  width: 280px;
}

.content {
  flex-grow: 1;
}

.footer {
  background-color: #222;
  color: #fff;
  padding: 20px;
}