JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<table class="light_gray" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <td class="menuContent">
            <div style="float:left;width:80%; padding: 7px;">
                <ul id="nav">
                    <li id="0">
                    <span>
                    <span>
                    <a href="http://localhost:8081/cpc/app/login/Index" class="childmenu" id="home"><span class="childmenutext">Home</span></a>
                    </span>
                    </span>
                    </li>
                    <li id="1">
                    <span>
                    <span id="menu_offers">
                    <span class="childmenutext menu-has-submenu">Mikas</span>
                    </span>
                    <ul style="left:-999em" id="offers">
                        <li>
                        <span>
                        <span>
                        <a href="" class="childmenu" id="promo_super_clase"><span class="childmenutext">Prosdrty</span></a>
                        </span>
                        </span>
                        </li>
                        <li>
                        <span>
                        <span>
                        <a href="" class="childmenu" id="portofolii"><span class="childmenutext">Portos</span></a>
                        </span>
                        </span>
                        </li>
                        <li>
                        <span>
                        <span>
                        <a href="" class="childmenu" id="clase_de_oferte"><span class="childmenutext">Cubaya</span></a>
                        </span>
                        </span>
                        </li>
                        <li>
                        <span>
                        <span>
                        <a href="" class="childmenu" id="offers_offers"><span class="childmenutext">Faboas</span>
                        </span>
                        </li>
                        <li>
    ...

CSS

@CHARSET "ISO-8859-1";

* {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    cursor: default;
}


body {
    background: #fff;
    color: #666666;
    margin: 5px auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: left;
    width: 93%;
    /*width: 870px;*/
}

/***disabled elements***/
*[disabled],[readonly] {
  opacity: 0.5;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  background:#F8F8F8 !important;
  outline:none !important;
}

input[type="text"],input[type="password"]{
    border: 1px solid #DDDBD7;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    margin-right:20px;
    }


h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    color: #ff0000;
    margin: 0px;
    padding: 0px;
    font-size: 19px;
    font-weight: normal;
}

h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    letter-spacing: -1px;
    font-weight: bold;
    color: #000000;
    padding: 12px 0 0 0;
    margin: 15px 0px 0px 0px;
    font-size: 15px;
}

h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    padding: 0;
    margin: 10px 0px 3px 0px;
    letter-spacing: -1px;
}

h3.title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    padding-top: 10px;
    margin: 10px 0px 3px 0px;
    letter-spacing: 1px;
    clear: left;
}

table {
    font-size: 10px;
    font-weight: normal;
    margin-bottom: 10px;
    border: 0;
}

th {
    font-weight: normal;
}

a {
    font-weight: normal;
    color: gray;
}

a.small_link {
    font-weight: normal;
    font-size: 0.8em;
    color: black;
}

#errors {
    float: left;
    clear: both;
    margin: 5px;
}

hr {
    background-color: #dedede;
    clear: both;
    float: left;
 ...

JavaScript

function mainMenu() {
    (function($) {

        //cache nav
        var nav = $("#nav");

        //add indicator and hovers to submenu parents
        nav.find("li").each(function() {
            if ($(this).find("ul").length > 0) {
                //$("<span>").text("^").appendTo($(this).children(":first"));
                //show subnav on hover
                $(this).mouseenter(function() {
                    $(this).find("ul").stop(true, true).slideDown();
                });
                //hide submenus on exit
                $(this).mouseleave(function() {
                    $(this).find("ul").stop(true, true).slideUp();
                    //alert("this is an alert!");
                });
            }
        });
    })(jQuery);
};

function inputWidth() {
    $('input[type=text][disabled="disabled"]').not(".hasDatepicker").removeAttr("disabled").attr("readonly", true);
    $('input[type=text]').focus(function() {
        if ($(this).val().length > 20) {
            $(this).data('default', $(this).data('default') || $(this).width());
            $(this).stop().not(".notrun").animate({
                width: 370
            }, 'slow');
            $(this).parent().addClass('cooling');
            //$(this).parent().animate({ marginRight: "200px" }, slow );
        }
    }).blur(function() { /* lookup the original width */
        $(this).stop().animate({
            width: $(this).data('default')
        }, 'fast');
        $(this).parent().removeClass('cooling');
    });
};

 function rowSelection() {
         $('table.grid tbody  tr  td').click(function () {
             var selected = $(this).parent();
             $('table.grid tbody  tr').each(function (index) {
                 if ($(this).hasClass("selectedRow")) {
                     $(this).removeClass("selectedRow");} });
             if (!selected.hasClass('selectedRow')) {
                 selected.addClass("selectedRow");
           }});
}

 function myHover() {
        var sfEls =...