JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Current look... -->
<div class="seatmap">
    <div id="plane1" class="plane"></div>
    <div id="cabin1" class="cabin">
        
        <table>
          <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th rowspan="2" colspan="2">D</th>
        <th>E</th>
            <th>F</th>
            <th>G</th>
            <th rowspan="2">F</th>
        </tr>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatUnavailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatStorage"></td>
        </tr>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatUnavailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatStorage"></td>
        </tr>
        <tr>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
        </tr>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatLavatory"></td>
        </tr>
        <tr>
            <td...

CSS

body {
    font-family: Arial; 
    font-size: 11px;
}
.seatmap { 
    position: relative; 
}

.plane {
	width: 200px;
	height: 100px;
	background: #fff;
    border: solid 1px #aaa;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
    z-index: 1;
    position: absolute;    
    clip: rect(0px,80px,102px,0px);
}
    #plane1 { top: 0px; }
    #plane2 { top: 200px; }

.cabin { 
    background-color: #dedede; 
    border: solid 1px #999;
    border-left: solid 2px #999;
    width: auto; 
    height: auto;     
    z-index: 2; 
    position: absolute;    
    padding: 5px;
}
    #cabin1 { margin-top: -99px; margin-left: 80px; top: 100px; }
    #cabin2 { margin-top: 0; margin-left: 80px; top: 200px; }

.cabin td { width: 15px; height: 15px; border: solid 1px #666; text-align: center; }
    .cabin td.seatAvailable         { background-color: aqua; }
    .cabin td.seatUnavailable       { background-color: #666; }
    .cabin td.seatAvailableExtraPay { background-color: navy; color: #fff !important; }
    .cabin td.LargeSeatAvailable    { }
    .cabin td.noSeatGalley          { border: none; width: 10px; height: 10px; background-color: transparent; }
    .cabin td.noSeatStorage         { background-color: yellow; }
    .cabin td.noSeatLavatory        { background-color: #ccc; }

JavaScript

$('.noSeatStorage').html('S');
$('.noSeatLavatory').html('L');
$('.seatAvailableExtraPay').html('E');

var planeHeight = $('.cabin').height() + 12;
$('.plane').css('height', planeHeight);
$('.plane').css('border-radius', planeHeight + '/ ' + planeHeight/2);
$('.plane').css('clip', 'rect(0px, 80px, '+planeHeight+'px, 0px)')