JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sdisplay"></div>

CSS

table.sevenseg {
	    background-color:#000000;
	    vertical-align: top;
	    display:inline-block;
	    margin:0;
	    padding:0;
	}
	td.on {
	    background-color:#ff0000;
	    text-align: center;
	    vertical-align: top;
	}
	td.off {
	    background-color:#440000;
	    text-align: center;
	    vertical-align: top;
	}
	td.bg {
	    background-color:#000000;
	    text-align: center;
	    vertical-align: top;
	}
	table.sevenseg tr.thin {
	    height:5px;
	}
	table.sevenseg tr.thick {
	    height:10px;
	}
	table.sevenseg td.narrow {
	    width:2px;
	}
	table.sevenseg td.wide {
	    width:7px;
	}
	div#sdisplay {
	    background-color:#000;
	    display:inline-block;
	}

JavaScript

var DISP7 = DISP7 || function (elements, id) {
        var html = '';
        for (var i = 0; i < elements; i++) {
            html += '	<table align="center" class="sevenseg sd' + i + id + '">' +
                '<tr class="thin">' +
                '<td class="bg narrow"></td>' +
                '<td data-id="seg_a" class="off wide"></td>' +
                '<td class="bg narrow"></td>' +
                '</tr>' +
                '<tr class="thick">' +
                '<td data-id="seg_f" class="off narrow"></td>' +
                '<td class="bg wide"></td>' +
                '<td data-id="seg_b" class="off narrow"></td>' +
                '</tr>' +
                '<tr class="thin">' +
                '<td class="bg narrow"></td>' +
                '<td data-id="seg_g" class="off wide"></td>' +
                '<td class="bg narrow"></td>' +
                '</tr>' +
                '<tr class="thick">' +
                '<td data-id="seg_e" class="off narrow"></td>' +
                '<td class="bg wide"></td>' +
                '<td data-id="seg_c" class="off narrow"></td>' +
                '</tr>' +
                '<tr class="thin">' +
                '<td class="bg narrow"></td>' +
                '<td data-id="seg_d" class=" wide"></td>' +
                '<td class="bg narrow"></td>' +
                '</tr>' +
                '</table>';
        }
        document.getElementById(id).innerHTML = html;

        var set = function (d, s, f) {
            if (f) {
                $(".sd" + d + id + " td[data-id=seg_" + s + "]").removeClass("off");
                $(".sd" + d + id + " td[data-id=seg_" + s + "]").addClass("on");
            } else {
                $(".sd" + d + id + " td[data-id=seg_" + s + "]").removeClass("on");
                $(".sd" + d + id + " td[data-id=seg_" + s + "]").addClass("off");
            }
        };

        return set;
    };

var mydisp = DISP7(9, 'sdisplay');

mydisp(0, 'a', true);
mydisp(1, 'a', true);
mydisp(8,...