JSFiddle - React, Tailwind, and code Playground

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

HTML

<div class="table">
  <div class="table__body">
    <div class="table__row -invalid">
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
    <div class="table__row -focused">
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
    <div class="table__row">
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
    <div class="table__row">
      <div class="table__cell -invalid">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell -invalid">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
    <div class="table__row -focused">
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
    <div class="table__row">
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
    <div class="table__row">
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
      <div class="table__cell">-</div>
    </div>
  </div>
</div>

SASS

html
  font-size: 10px
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif

*
  box-sizing: border-box

.table
  font-size: 1.4rem
  overflow: auto
  padding: 1px
  &__body
    display: flex
    flex-direction: column
  &__row
    display: flex
    margin: auto
    &:nth-child(odd)
      background: #f1f1f1
    &.-focused .table__cell
      border-top-color: blue
      border-bottom-color: blue
    &.-invalid .table__cell
      border-top-color: red
      border-bottom-color: red
      z-index: 2 // higher priority
  &__cell
    flex-shrink: 0
    display: flex
    align-items: center
    padding: 0 1rem
    height: 3.5rem
    margin: -.5px
    border: 1px solid transparent
    position: relative
    &:hover
      border-color: #888
      z-index: 1
    &.-invalid
      border-color: red
      z-index: 2
    &:focus-within
      outline: none
      border-color: #000!important
      z-index: 3
    
    
// Remove as it should be set as inline style
.table__cell
  width: 12rem

JavaScript

document.querySelectorAll('.table__cell').forEach($ => $.contentEditable = true)