JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="table">
  <div class="table__skeleton">
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
    <div class="row -skeleton"></div>
  </div>
  <div class="table__rows">
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
    <div class="row"></div>
  </div>
</div>

SCSS

.table {
  height: 250px;
  width: 600px;
  overflow: auto;
  position: relative;
  &__skeleton {
    position: sticky;
    top: 0;
    left: 0;
  }
  &__rows {
    position: relative;
  }
}

.row {
  height: 15px;
  margin: 5px;
  background: #444;
  &.-skeleton {
    background: #f00;
  }
}