JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table1" class='table-div'>
  <!-- table caption. Note: this is not inside border -->
  <div class='table-caption-div'>People Names</div>
  
  <!-- table head -->
  <header class='table-row-div'>
    <div class="table-cell-div">Name</div>    
    <div class="table-cell-div">Spouse Name</div>    
    <div class="table-cell-div">Child Name</div>    
  </header>

  <!-- table-rows -->
  <div class='table-row-div'>
    <div class="table-cell-div">George</div>
    <div class="table-cell-div">Rita</div>
    <div class="table-cell-div">John</div>
  </div>
  <div class='table-row-div'>
    <div class="table-cell-div">James</div>
    <div class="table-cell-div">Nancy</div>
    <div class="table-cell-div">Forrest</div>
  </div>
  <div class='table-row-div'>
    <div class="table-cell-div">Adam</div>
    <div class="table-cell-div">Kumi</div>
    <div class="table-cell-div">Calvin</div>
  </div>
</div>

CSS

.table-div {
  display: table;
  width: 300px
  color: #000
  font-size: 90%
  text-align: center;
}

#table1 {
  border: 2px solid blue;
}

.table-div header {
  font-weight: bold;
}

.table-caption-div {
  display: table-caption;
  background-color: #cf0;
}

.table-row-div {
  display: table-row;
  background-color: #fff;
  border-top: 1px solid black;
}

.table-row-div:last-child .table-cell-div {
  border-bottom: 0;
}

.table-cell-div {
  display: table-cell;
  padding: 5px;
  border-width: 0px 1px 1px 0;
  border-style: solid;
  border-color: #000
}

.table-cell-div:last-child {
  border-right: 0
}