JSFiddle - React, Tailwind, and code Playground

HTML

<div id="seatmap">
    <div id="plane"></div>
    <div id="cabin">
        
        <table>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatUnavailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatAvailable"></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="seatAvailable"></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 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...

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;
    top: 0px;
    clip: rect(0px,80px,102px,0px);
}

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

#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)')