JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<div id="board"></div>
<div id="sidebar">
    <h1>My Guests</h1>
    <p>Total Guests: 56</p>
    <p>Seated: 0</p>
    <p>Unseated: 56</p>
    
    <label>search your guest list:</label>
    <input type="text" value="search" />
</div>

CSS

#board { position: absolute;}
#sidebar{ position: absolute; right: 20px; width: 300px; background-color: #FFF;}

JavaScript

var paper = Raphael("board", 900, 900);
var animationTime = 300,
    colGuest = "yellow",
    colGuestStroke = "black",
    colGuestMoveStroke = "blue",
    colGuestSwapStroke = "purple",
    colTable = "purple",
    colTableStroke = "black",
    colTableSelectedStroke = "yellow",
    colSeatSelectedStroke = "blue";

paper.customAttributes.model = function(model) {
    this.myModel = model;
    return this.myModel;
};

paper.customAttributes.ox = function(ox) {
    this.myOx = ox;
    return this.myOx;
};
paper.customAttributes.oy = function(oy) {
    this.myOy = oy;
    return this.myOy;
};
paper.customAttributes.fromTableX = function(fromTableX) {
    this.myfromTableX = fromTableX;
    return this.myfromTableX;
};
paper.customAttributes.fromTableY = function(fromTableY) {
    this.myfromTableY = fromTableY;
    return this.myfromTableY;
};
var inrange = false,
    seatList = [],
    draggableGuests = [],
    AllEvents = [],
    AllEventsAuditBox = paper.text(200, 20, "loaded");

function logEvent(eventText) {
/*AllEvents.push(eventText);
    AllEventsAuditBox.remove();
    AllEventsAuditBox = paper.text(
    400, 200, AllEvents.slice(-20).join("\n"));*/
}

var Guest = function(name, x, y) {
    logEvent("Create Guest");
    this.name = name;
    this.text = false;
    this.graphic = paper.path("M -10 -10 L 10 -10 L 0 10 z");
    this.graphic.attr({
        ox: 0,
        oy: 0
    });
    this.setGraphicPosition(x, y);
    this.graphic.attr({
        fill: colGuest,
        stroke: colGuestStroke,
        model: this
    });
    this.showHelpText = function(text, x, y) {
        if (!x) {
            x = this.graphic.attr("ox");
        }
        if (!y) {
            y = this.graphic.attr("oy");
        }
        if (text) {
            this.hideName();
            this.text = paper.text(x, y - 20, text);
        }
    };
    this.hideName = function() {
        if (this.text) {
            this.text.remove();
        }
    };
   ...