JSFiddle - React, Tailwind, and code Playground

by manoj1234

HTML

<div class="seating-plan">

                <div class="till-door">
                    <p>Till</p>
                    <p>Door</p>
                </div>

                <section id="section-1">
                    <div class="square available"></div>
                    <div class="square grey"></div>
                    <div class="square available"></div>
                    <div class="square available"></div>

                </section>

                <section id="section-2">

                    <div id="section-2-left">
                        <div class="half-circle available"></div>
                        <div class="half-circle grey"></div>
                        <div class="half-circle available"></div>
                        <div class="half-circle available"></div>
                    </div>
                    <div id="section-2-middle">
                        <div class="square-container">
                            <div class="square available"></div>
                            <div class="square available"></div>
                            <div class="square available"></div>
                        </div>

                        <div class="square-container">
                            <div class="square available"></div>
                            <div class="square available"></div>
                            <div class="square grey"></div>
                        </div>

                        <div class="square-container">
                            <div class="square grey"></div>
                            <div class="square available"></div>
                            <div class="square available"></div>
                        </div>


                    </div>
                    <div id="section-2-right">
                        <div class="full-circle available"></div>
                        <div class="full-circle available"></div>
                        <div class="full-circle available"></div>
                 ...

CSS

.active {
  background-color: #00ccbc;
 }


.seating-plan {
	 height: 100%;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 padding: 12px;
	 border: solid 1px #e8ebeb;
}
 .seating-plan .grey {
	 border-color: #d9d9d9 !important;
}
 .seating-plan .till-door {
	 display: flex;
	 justify-content: space-between;
	 height: auto;
	 color: #a9a9a9;
}
 .seating-plan #section-1 {
	 height: 10%;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 display: flex;
}
 .seating-plan #section-2 {
	 height: 80%;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
 .seating-plan #section-2 #section-2-left {
	 height: 100%;
	 width: 20%;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
	 align-items: flex-start;
}
 .seating-plan #section-2 #section-2-left .half-circle {
	 width: 35px;
	 height: 25px;
	 border-top-left-radius: 110px;
	 border-top-right-radius: 110px;
	 border: solid 1px #00ccbc;
}
 .seating-plan #section-2 #section-2-left .half-circle:nth-child(2) {
	 transform: rotate(180deg);
}
 .seating-plan #section-2 #section-2-left .half-circle:nth-child(4) {
	 transform: rotate(180deg);
}
 .seating-plan #section-2 #section-2-middle {
	 height: 100%;
	 width: 180px;
	 justify-content: space-evenly;
	 flex-wrap: wrap;
	 display: flex;
	 flex-direction: column;
}
 .seating-plan #section-2 #section-2-middle .square-container {
	 display: flex;
	 justify-content: space-between;
}
 .seating-plan #section-2 #section-2-right {
	 height: 100%;
	 width: 20%;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
	 align-items: flex-end;
}
 .seating-plan #section-3 {
	 height: 10%;
	 align-items: center;
	 justify-content: center;
	 display: flex;
	 justify-content: space-between;
}
 .seating-plan .square {
	 height: 35px;
	 width: 35px;
	 border: solid 1px #00ccbc;
}
 .seating-plan .full-circle {
	 height: 35px;
	 width: 35px;
	 border-radius: 50%;
	 border: solid 1px...

JavaScript

const availableTables = document.querySelectorAll('.available');

    for (let index = 0; index < availableTables.length; index++) {

      

            availableTables[index].onclick = () => {

                if (document.getElementsByClassName('active').length <= 3 ) {

                if (availableTables[index].classList.contains('active')) {
                    availableTables[index].classList.remove('active');
                }

                else {
                    availableTables[index].classList.add('active');
                }

            }


        }

    }