JSFiddle - React, Tailwind, and code Playground

by Rhys O'Connor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-4">
    <h2>
New to workbooks?
</h2>
    <br />
    <p>
      Using workbooks for the first time?
    </p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>

  </div>
  <div class="col-md-4">
    <h2>
System Admin
</h2>
    <br />
    <p>
      Familiarise yourself
    </p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>
  </div>
  <div class="col-md-4">
    <h2>Training videos</h2>
    <br />
    <p>Watch out short videos</p>
    <ul>
      <li>link 1</li>
      <li>link 3</li>
      <li>link 2</li>
    </ul>
  </div>
</div>

CSS

.rTable {
  display: table;
  width: 100%;
}

.content-section h4 {
  text-align: center;
  font-weight: 400;
  margin: 0 0 0 0;
}

.content-section img {
  margin-bottom: 0;
}

li.nowrap {
  white-space: nowrap;
}

.rTableRow {
  display: table-row;
}

.rTableHeading {
  display: table-header-group;
  background-color: #ddd;
}

.rTableCell,
.rTableHead {
  display: table-cell;
  padding: 3px 10px;
}

.rTableHeading {
  display: table-header-group;
  background-color: #ddd;
  font-weight: bold;
}

.rTableFoot {
  display: table-footer-group;
  font-weight: bold;
  background-color: #ddd;
}

.rTableBody {
  display: table-row-group;
}