JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
<h3 class="text-center">My attempt so far</h3><br>
<div clas="row">
  <div class="small-2 text-center small-offset-1 columns">
    <div class="wrap">
      <img src="http://placehold.it/64x64">
      <h3>Lorem Ipsum</h3>
      <p>It's a long established fact that the reader will be distracted by the readable content on a page when looking at it's layout.</p>
    </div>
  </div>
  <div class="small-2 text-center columns">
    <div class="wrap">
      <img src="http://placehold.it/64x64">
      <h3>Lorem Ipsum</h3>
      <p>It's a long established fact that the reader will be distracted by the readable content on a page when looking at it's layout.</p>
    </div>
  </div>
  <div class="small-2 text-center columns">
    <div class="wrap">
      <img src="http://placehold.it/64x64">
      <h3>Lorem Ipsum</h3>
      <p>It's a long established fact that the reader will be distracted by the readable content on a page when looking at it's layout.</p>
    </div>
  </div>
  <div class="small-2 text-center columns">
    <div class="wrap">
      <img src="http://placehold.it/64x64">
      <h3>Lorem Ipsum</h3>
      <p>It's a long established fact that the reader will be distracted by the readable content on a page when looking at it's layout.</p>
    </div>
  </div>
  <div class="small-2 text-center end columns">
    <div class="wrap">
      <img src="http://placehold.it/64x64">
      <h3>Lorem Ipsum</h3>
      <p>It's a long established fact that the reader will be distracted by the readable content on a page when looking at it's layout.</p>
    </div>
  </div>
</div>

SCSS

.image {
  margin-top: 40px;
}

.columns {
  padding: 0px;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  .wrap {
    padding: 5px;
    p {
      font-size: 12px;
    }
  }
  &:last-child {
    border-right: 0px;
  }
}