JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
  </head>


  <div class="container">
    <div class="seat-screen">Е К Р А Н</div>
    <div class="seat-container">
      <div class="seat-container-normal">
        <div class="seat" style="grid-column: 1; grid-row: 1;"></div>
        <div class="seat" style="grid-column: 2; grid-row: 1;"></div>
        <div class="seat" style="grid-column: 3; grid-row: 1;"></div>
        <!-- 4 col is gap -->
        <!-- 5 col is not used -->
        <!-- 6 col is not used -->
        <!-- 7 col is not used -->
        <!-- 8 col is gap -->
        <div class="seat" style="grid-column: 9; grid-row: 1;"></div>
        <div class="seat" style="grid-column: 10; grid-row: 1;"></div>
        <div class="seat" style="grid-column: 11; grid-row: 1;"></div>

        <div class="seat" style="grid-column: 1; grid-row: 2;"></div>
        <div class="seat" style="grid-column: 2; grid-row: 2;"></div>
        <div class="seat" style="grid-column: 3; grid-row: 2;"></div>
        <!-- 4 col is gap -->
        <div class="seat" style="grid-column: 5; grid-row: 2;"></div>
        <div class="seat" style="grid-column: 6; grid-row: 2;"></div>
        <div class="seat" style="grid-column: 7; grid-row: 2;"></div>
        <!-- 8 col is gap -->
        <div class="seat" style="grid-column: 9; grid-row: 2;"></div>
        <div class="seat" style="grid-column: 10; grid-row: 2;"></div>
        <div class="seat" style="grid-column: 11; grid-row: 2;"></div>

      </div>
      <div class="seat-container-spetial">
        <div class="seat seat-special" style="grid-column: 2; grid-row: 1;"></div>
        <div class="seat seat-special" style="grid-column: 4; grid-row: 1;"></div>
        <div class="seat seat-special" style="grid-column: 5; grid-row: 1;"></div>
        <div class="seat seat-special" style="grid-column: 7; grid-row: 1;"></div>
      </div>

    </div>
 ...

CSS

.seat-container-normal {
  display: grid;
  grid-template-rows: repeat(2, 3rem);
  grid-template-columns: repeat(2, auto auto auto .5rem) auto auto auto;
  grid-column-gap: 1rem;
  grid-row-gap: .5rem;
  padding: .5rem;
}

.seat-container-spetial {
  display: grid;
  grid-template-rows: 3rem;
  grid-template-columns: .5rem auto .5rem auto auto .5rem auto .5rem;
  grid-column-gap: 1rem;
  grid-row-gap: .5rem;
  padding: .5rem;
}

.container {
  margin: 25px;
  padding: 10px;
  border: 1px solid black;
  min-width: 35rem;
}

.seat-screen {
  height: 25px;
  background-color: azure;
  color: cadetblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seat-container {
  border: 1px dashed black;
  margin: 0 auto;
  border-radius: 5px;
  height: calc(20rem - 25px);
  width: 30em;
}

.seat {
  border-radius: .3rem;
  background-color: royalblue;
  cursor: pointer;
}

.seat-special {
  background-color: limegreen;
}