JSFiddle - React, Tailwind, and code Playground

by Bruno Sabetta

HTML

<div class="grid">
  <div class="header">

    <span>
      <strong>Id</strong>
    </span>
    <span>
      <strong>FullName</strong>
    </span>
    <span>
      <strong>Country</strong>
    </span>
    <span>
      <strong>Created at</strong>
    </span>
    <span>
      <strong>Email</strong>
    </span>
  </div>
  <div class="body">
    <div class="tr">
      <span>0</span>
      <span>AaronKris</span>
      <span>Philippines</span>
      <span>1991-05-23T14:19:51</span>
      <span>[email protected]</span>
    </div>
    <div class="tr">
      <span>1</span>
      <span>SimeonMcLaughlin</span>
      <span>Singapore</span>
      <span>2012-03-07T00:08:36</span>
      <span>[email protected]</span> </div>
    <div class="tr">
      <span>2</span>
      <span>Kelsie Shanahan</span>
      <span>Brazil</span>
      <span>1985-03-10T20:13:04</span>
      <span>[email protected]</span> </div>
  </div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid black;
    border-right: 1px solid black;
}

.header, .body, .tr {
  display: contents;
}

.grid  span {
    padding: 8px 4px;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}