JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head><title>
        
        Tickets
        
        </title><link href="Content/Site.css" rel="stylesheet" type="text/css" /><link type="text/css" href="Content/themes/overcast/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
        <script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="/Scripts/ShoppingCart-4.0.js"></script>
        
    </head>
    <body>
        <div class="page">
            <div id="uppermenu">
                <ul id="menu">
                    <li>
                        <a href="/">Home</a></li>
                    <li class="horizontaldivider">&nbsp;</li>
                    <li>
                        
                        <a href="#" id="Logon_link">[ Log On ]</a>
                        
                        
                    </li>
                    <li class="horizontaldivider">&nbsp;</li>
                    <li><a href="#" id="SC_Link">Cart {0}</a></li>
                </ul>
            </div>
            <div id="SCWindow" title="Shopping Cart">
            </div>
            <div id="header">
                <div id="title">
                    
                    <img src="/image/GeneralImage?ImageID=27&Width=0&Height=0"
                    alt="Logo1" />
                    
                </div>
            </div>
            <div id="main">
                <div id="maincontentheader">
                    
                    Tickets
                    
                </div>
                <div id="functionsmenu">
                    <ul id="functionmenu">
                        
                        <li><a href="/Tickets">Tickets</a></li>
                        
                        <li><a href="/Packages">Packages</a></li>
                        
                        <li><a...