JSFiddle - React, Tailwind, and code Playground

HTML

<div class="room">
  <div class="row"> 
    <div class="row__name">Ряд 1</div>
    <div class="seats">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat seat--occupied"></div>
      <div class="seat seat--reserved"></div>
      <div class="space"></div>
      <div class="space"></div>
      <div class="space"></div>
      <div class="space"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
    <div class="row__name">Ряд 1</div>
  </div>
  <div class="row"> 
    <div class="row__name">Ряд 2</div>
    <div class="seats">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat seat--occupied"></div>
      <div class="seat seat--reserved"></div>
      <div class="seat"></div>
      <div class="space"></div>
      <div class="space"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
    <div class="row__name">Ряд 2</div>
  </div>
  <div class="row"> 
    <div class="row__name">Ряд 3</div>
    <div class="seats">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div...

CSS

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.room {
  max-width: 1200px;
  margin: 0 auto;
  font-size: 14px;
  font-family: sans-serif;
  color: #eee
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.row__name {
  color: #aaa;
}

.seats {
  text-align: center;
  font-size: 0;
}

.seat,
.space {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  margin: 1px;
}

.seat {
  border: 1px solid #aaa;
  border-radius: 50%;
  background-color: #eee;
  transition: 0.2s;
  cursor: pointer;
}

.seat:hover {
  background-color: #bbb;
}

.seat--reserved {
  background-color: #999;
}

.seat--occupied {
  background-color: #9ff57d;
}