JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<body><header class="seats-header">
  <h1>Reserve a Seat</h1>
</header>

<section id="seats">

  <div class="seating-chart">
    <h3>- First Class -</h3>
    <ol class="first-class">
      <li class="row">
        <ol>
          <li><a class="available" data-features="tv,power" data-seat="1a" href="#">A</a></li>
          <li><a data-seat="1b" href="#">B</a></li>
          <li><a data-seat="1c" href="#">C</a></li>
          <li><a data-seat="1d" href="#">D</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-features="power" data-seat="2a" href="#">A</a></li>
          <li><a class="available" data-features="tv" data-seat="2b" href="#">B</a></li>
          <li><a class="available" data-features="power" data-seat="2c" href="#">C</a></li>
          <li><a data-seat="2d" href="#">D</a></li>
        </ol>
      </li>
    </ol>

    <h3>- Economy Class -</h3>
    <ol class="economy-class">
      <li class="row">
        <ol>
          <li><a class="available" data-seat="3a" href="#">A</a></li>
          <li><a data-seat="3b" href="#">B</a></li>
          <li><a data-seat="3c" href="#">C</a></li>
          <li><a class="available" data-seat="3d" data-features="power" href="#">D</a></li>
          <li><a class="available" data-seat="3e" data-features="tv" href="#">E</a></li>
          <li><a class="available" data-seat="3f" data-features="power" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a data-seat="4a" href="#">A</a></li>
          <li><a data-seat="4b" href="#">B</a></li>
          <li><a data-seat="4c" href="#">C</a></li>
          <li><a class="available" data-seat="4d" href="#">D</a></li>
          <li><a class="available" data-seat="4e" href="#">E</a></li>
          <li><a class="available" data-seat="4f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="5a"...