JSFiddle - React, Tailwind, and code Playground

by johnsam

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="my-all d-flex flex-column height100">
  <div class="container-fluid" style="background: red;">
    <div class="row">
      <div class="col-12 my-5">
        Test space long long long
      </div>
    </div>
  </div>
  <div class="my-main d-flex height100" style="background: cyan;">
    <div class="container-fluid d-flex media-body">
      <div class="row my-row my-3">
        <div class="col-6 my-grid">
          <a class="btn btn-secondary my-btn">
            <span>FIRST</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>A</span>
          </a>
          <a class="btn btn-secondary my-btn">
            <span>B</span>
          </a>
          <a class="btn btn-secondary...

CSS

.my-all.height100 {
  height: 100vh;
}

.my-all {
  min-height: 100vh;
}

.my-main.height100 {
  min-height: 0;
}

.my-main {
  flex: 1;
}

.my-grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(5vmax, 1fr));
  //grid-auto-rows: 1fr;
}

.my-row {
  flex-wrap: nowrap;
  flex: 1;
}

a.my-btn {
  font-size: 0.5em;
  padding: 0;
  position: relative;
  display: grid;
  align-content: center;
}

.container-fluid {
  margin-left: 0;
  margin-right: 0;
}

//a.my-btn span {
//  display: none;
//}