JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12 docs">
      <p>Some sample code</p>
      <pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre>
    </div>
  </div>
</div>

<div class="flexer"></div>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text-center">
        footer
      </div>
    </div>
  </div>
</footer>

CSS

html,
body {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

pre {
  overflow-x: scroll !important;
}

code {
  max-height: 200px;
  background-color: #eeeeee;
  word-break: normal !important;
  word-wrap: normal !important;
  white-space: pre !important;
}

.flexer {
  flex: 1;
}

footer {
  background-color: #CCC;
}