JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
  <div class="tr header">
    <div class="td header">Name</div>
    <div class="td header">Color</div>
    <div class="td header">Sport</div>
    <div class="td header">Fruit</div>
    <div class="td header">Size</div>
  </div>
  <div class="tr">
    <div class="td">John</div>
    <div class="td">Red</div>
    <div class="td">Golf</div>
    <div class="td">Apple</div>
    <div class="td">Large</div>
  </div>
  <div class="tr">
    <div class="td">Adam</div>
    <div class="td">Blue</div>
    <div class="td">Basketball</div>
    <div class="td">Orange</div>
    <div class="td">Small</div>
  </div>
  <div class="tr">
    <div class="td">Michael</div>
    <div class="td">Tan</div>
    <div class="td">Football</div>
    <div class="td">Grape</div>
    <div class="td">Medium</div>
  </div>
  <div class="tr">
    <div class="td">Kevin</div>
    <div class="td">Purple</div>
    <div class="td">Basketball</div>
    <div class="td">Banana</div>
    <div class="td">Extra Large</div>
  </div>
  <div class="tr">
    <div class="td">Jacob</div>
    <div class="td">Black</div>
    <div class="td">Volleyball</div>
    <div class="td">Kiwi</div>
    <div class="td">Large</div>
  </div>
  <div class="tr">
    <div class="td">Troy</div>
    <div class="td">Blue</div>
    <div class="td">Wrestling</div>
    <div class="td">Cherry</div>
    <div class="td">Small</div>
  </div>
  <div class="tr">
    <div class="td">John</div>
    <div class="td">Red</div>
    <div class="td">Golf</div>
    <div class="td">Apple</div>
    <div class="td">Large</div>
  </div>
  <div class="tr">
    <div class="td">Adam</div>
    <div class="td">Blue</div>
    <div class="td">Basketball</div>
    <div class="td">Orange</div>
    <div class="td">Small</div>
  </div>
  <div class="tr">
    <div class="td">Michael</div>
    <div class="td">Tan</div>
    <div class="td">Football</div>
    <div class="td">Grape</div>
    <div class="td">Medium</div>
  </div>
  <div class="tr">
    <div...

CSS

/*Here is the magic:*/

.td.header {
  background-color: blue;
  color: white;
  border: 1px solid red;
  position: sticky;
  top:0px;
}

.td.footer {
  background-color: yellow;
  color: black;
  border: 1px solid red;
  position: sticky;
  bottom:0px;
}


/*end magic*/


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

.tr {
	display: table-row;
}

.thead {
	display: table-header-group;
}

.td, .th {
	display: table-cell;
}

.th {
	display: table-header-group;
}

.tfoot {
	display: table-footer-group;
}

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