JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<table id="uberfamnav" cellspacing="0" cellpadding="0" style="height: 93px;"><tbody><tr>
        <th class="first" onmouseover="uberroll(this,6,event)" id=""><img src="http://a.collectorsweekly.net/assets/web-resources/magazineartorg%2B35x35.jpg" alt="">Clothing&nbsp;+ Fashion</th><th onmouseover="uberroll(this,13,event)" id=""><img src="http://a.collectorsweekly.net/assets/web-resources/chicago-silver%2B35x35.jpg" alt="">Jewelry + Watches</th><th onmouseover="uberroll(this,2,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/eamescollector-com%2B35x35.jpg" alt="">Home + Furniture</th><th onmouseover="uberroll(this,3,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/the-bowes-museum-ceramics%2B35x35.jpg" alt="">Pottery + Glass</th><th onmouseover="uberroll(this,11,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/antique-and-19th-century-cameras%2B35x35.jpg" alt="">Art + Photos</th><th onmouseover="uberroll(this,7,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/baldwin-library-of-childrens-literature%2B35x35.jpg" alt="">Paper + Books</th><th onmouseover="uberroll(this,5,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/vintageguitars-org-uk%2B35x35.jpg" alt="">Music + Movies</th><th onmouseover="uberroll(this,9,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/race-car-toys-and-automobilia%2B35x35.jpg" alt="">Toys + Games</th><th onmouseover="uberroll(this,4,event)"><img src="http://a.collectorsweekly.net/articles/wp-content/uploads/2009/02/mickeymantlebaseball%2B35x35.jpg" alt="">Sports + Outdoors</th><th onmouseover="uberroll(this,10,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/the-telephone-archive%2B35x35.jpg" alt="">Ads + Signs</th><th onmouseover="uberroll(this,14,event)"><img src="http://a.collectorsweekly.net/assets/web-resources/art-deco-1910-1939%2B35x35.jpg" alt="">Eras + Themes</th><th id="nav-teaser"><a...

CSS

* {
    margin: 0;
    padding: 0
}

body {
    background-color: #fff;
    font: small verdana, arial, sans-serif;
}

#centerwrap {
    margin: 0 auto;
    width: 990px;
    position: relative;
}

a {
    text-decoration: none;
}

.tiny_text {
    font-size: 11px;
}

.small_text {
    font-size: 12.5px;
}

.large_text {
    font-size: 14px;
}

.inline-block {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.modern {
    font-family: helvetica, arial, sans-serif;
}

.wrap {
    padding-top: 15px;
}

.modern h1, .modern h2, .modern h3, .modern h4 {
    font-family: georgia, sans-serif;
    font-weight: normal;
    border-bottom: 1px solid #ddd;
    padding-bottom: 2px;
}

.modern h1 {
    font-size: 30px;
}

.modern h2 {
    font-size: 22px;
    line-height: 1.3;
}

.modern h3 {
    font-size: 18px;
}

.modern h1, .modern h2, .modern h3, .modern h4, .modern p, .modern ol, .modern ul, .modern table, .modern blockquote, .modern .block {
    margin-bottom: 10px;
}

.modern .block, .modern .halfblock, .modern .zeroblock {
    display: block !important;
}

.modern .halfblock {
    margin-bottom: 5px;
}

.zeroblock {
    margin-bottom: 0 !important;
}

.modern p, .modern .p {
    line-height: 1.5em;
}

.modern .toph1 {
    margin-top: 10px;
    border: 0;
    margin-bottom: 0;
}
    .modern .toph1 a { color: black; }

.modern li {
    margin-left: 30px;
    padding: 0 5px 6px 0;
}

.noDots li {
    list-style: none;
    background: none;
    margin-left: 15px;
}

.noBorder, .modern .noBorder {
    border: 0;
}

.modern .smalltext {
    font-size: 90%;
}

.modern .mediumtext {
    font-size: 115%;
}

.modern .largetext {
    font-size: 140%;
}

.modern .hugetext {
    font-size: 180%;
}

.modern .error {
    border: 0;
}

.event-thumb, .shevents-thumb {
    float: left;
    padding: 1px;
    margin: 2px 6px 0 0;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
}

#sub-content .shevents-cat-tease {
   ...

JavaScript

var _ubertimeout;
function uberroll(that, id, event) {

    if (new Date().valueOf() - lastRoll < 1500) {
        
        uberroller(that,id);
        
    } else {
        
        that.onmouseout = cancelUberroll;
        _ubertimeout = setTimeout(uberroller.pass([that,id]), 150);
        
    }
    
}

function cancelUberroll() {
    
    $clear(_ubertimeout);
    
}

var lastRoll = 0;

function uberroller(that, id) {
    
    lastRoll = new Date().valueOf();
    
    var ul = $('ubernav-'+id).clone();
    
    alert(ul.innerHTML);
    
}