JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<section id="leadership-team">
  <div class="entry-content">
    <h1>Leadership Team</h1>
<div class="gca-column one-third first"><table>
<tbody>
<tr><td class="column" rowspan="6">
<p class="rotate column-second">Mutualised Function</p>
</td></tr><tr><td><img class="alignnone size-medium wp-image-310" src="/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" srcset="http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e-300x244.jpg 300w, http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e.jpg 304w" sizes="(max-width: 300px) 100vw, 300px"><p></p>
<p><span class="green">Group Manager</span> <br>Ndivhuwo M. Ndzeru</p>
</td></tr><tr><td><img class="alignnone size-medium wp-image-310" src="/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" srcset="http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e-300x244.jpg 300w, http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e.jpg 304w" sizes="(max-width: 300px) 100vw, 300px"><p></p>
<p><span class="green">Group Manager</span> <br>Ndivhuwo M. Ndzeru</p>
</td></tr><tr><td><img class="alignnone size-medium wp-image-310" src="/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" srcset="http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e-300x244.jpg 300w, http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e.jpg 304w" sizes="(max-width: 300px) 100vw, 300px"><p></p>
<p><span class="green">Group Manager</span> <br>Ndivhuwo M. Ndzeru</p>
</td></tr><tr><td><img class="alignnone size-medium wp-image-310" src="/wp-content/uploads/2016/09/e-300x244.jpg" alt="e" width="300" height="244" srcset="http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e-300x244.jpg 300w, http://www.sidimaag.burnnotice.co.za/wp-content/uploads/2016/09/e.jpg 304w" sizes="(max-width: 300px) 100vw, 300px"><p></p>
<p><span class="green">Group Manager</span> <br>Ndivhuwo M. Ndzeru</p>
</td></tr><tr><td><img...

CSS

section#leadership-team .gca-column.one-third.first {
    padding-top: 1%;
}
.first {
    clear: both;
    margin-left: 0;
}
.one-third, .two-sixths {
    width: 31.6239316239%;
}
.five-sixths, .four-fifths, .four-sixths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fifths, .three-fourths, .three-sixths, .two-fifths, .two-fourths, .two-sixths, .two-thirds {
    float: left;
    margin-left: 2.5641025641%;
}
td.column {
    background-color: #99c71b;
    position: relative;
    width: 30px;
}
td {
    padding-top: 0;
}
td {
    padding: 0.5rem;
}
td {
    padding-bottom: 60px !important;
}
*, *:before, *:after {
    box-sizing: inherit;
}

td, th {
    display: table-cell;
    vertical-align: inherit;
}
p.rotate.column-second {
    position: absolute;
    bottom: 6%;
}
.rotate {
    font-family: Open Sans Condensed;
    text-transform: uppercase;
    font-size: 20pt;
}
.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    white-space: nowrap;
    width: 0.5em;
    overflow: visible;
    filter: progid DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-weight: bold;
    position: absolute;
}
td p {
    margin: 0;
}