JSFiddle - React, Tailwind, and code Playground

by santy_naren

HTML

<h1>Select seat</h1>
<main>
  <section class="legend">
    <div class="info">
      You haven't reserved a seat, yet.
    </div>
  </section>
  <section class="layout"></section>
</main>

CSS

@import url('https://fonts.googleapis.com/css?family=Manjari&display=swap');

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  font-family: 'Manjari', sans-serif;
}

h1 {
  margin-bottom: 1rem;
}

main {
  display: flex;
  width: 70vw;
  background-color: #eee;
}

main section {
  flex: 1;
  padding: 1rem;
}

main section .info {
  padding: 1rem;
}

main section .row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

main section .row + .row {
  margin-top: 1rem;
}

main section .row .header {
  text-transform: uppercase;
}

main section .row > * {
 width: 2rem;
 height: 2rem;
 background-color: transparent;
 display: flex;
 align-items: center;
 justify-content: center;
 border-radius: .5rem;
}

main section .row .seat {
  align-items: flex-end;
}

main section .row .seat:not(.disabled):after {
  content: "";
  width: 70%;
  height: .2rem;
  background-color: rgba(0,0,0,.3);
  margin-bottom: .4rem;
  border-radius: 2rem;
}

main section .row .seat:not(.disabled):hover {
  filter: brightness(130%);
  cursor: pointer;
}

main section .row .seat.disabled { background-color: transparent; }
main section .row .seat.empty { background-color: rgb(220, 220, 220); }
main section .row .seat.priority { background-color: rgb(155, 150, 7); }
main section .row .seat.filled { background-color: rgb(255, 198, 14); }
main section .row .seat.excellence { background-color: rgb(153, 153, 153); }

JavaScript

const data = {
	headers: [
  	"a", "b", "c", "d", "e", "f"
  ],
  seats: [
  	{ a: "empty", b: "disabled", c: "empty", d: "empty", e: "disabled", f: "empty" },
    { a: "priority", b: "priority", c: "priority", d: "empty", e: "empty", f: "empty" },
    { a: "priority", b: "priority", c: "priority", d: "priority", e: "priority", f: "priority" },
    { a: "priority", b: "priority", c: "priority", d: "priority", e: "priority", f: "priority" },
    { a: "empty", b: "empty", c: "filled", d: "empty", e: "empty", f: "filled" },
    { a: "filled", b: "filled", c: "filled", d: "filled", e: "filled", f: "filled" },
    { a: "empty", b: "empty", c: "empty", d: "empty", e: "filled", f: "filled" },
    { a: "filled", b: "filled", c: "filled", d: "filled", e: "filled", f: "filled" },
    { a: "empty", b: "empty", c: "empty", d: "empty", e: "empty", f: "empty" },
    { a: "empty", b: "empty", c: "empty", d: "filled", e: "empty", f: "empty" },
    { a: "empty", b: "empty", c: "empty", d: "empty", e: "empty", f: "empty" },
    { a: "excellence", b: "excellence", c: "excellence", d: "empty", e: "empty", f: "excellence" },
    { a: "excellence", b: "excellence", c: "excellence", d: "excellence", e: "excellence", f: "excellence" },
  ]
};

const layout = document.querySelector(".layout");

const render = data => {
	layout.innerHTML = "";
	const headerRow = document.createElement("div");
  headerRow.className = "row header";
	layout.appendChild(headerRow);
  
  data.headers.forEach((h, i, a) => {
  	if (i === a.length / 2) {
      const number = document.createElement("div");
      number.className = "number";
      headerRow.appendChild(number);
    }
  
  	const header = document.createElement("div");
    header.className = "header";
    header.textContent = h;
		headerRow.appendChild(header);
  });
  
  data.seats.forEach((s, i) => {
  	const row = document.createElement("div");
    row.className = "row";
		layout.appendChild(row);
    const rowNumber = i;
    
   ...