JSFiddle - React, Tailwind, and code Playground

by Xhogar

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="wrapper">
    <div id="header">
         <h1><a href="http://www.reddit.com/r/MortalKombat" target="_blank">/r/MortalKombat</a> Interactive Krypt Map</h1> 
    </div>
    
    <div id="description" class="block">
        <h2>Help us complete this Krypt Map!</h2>
        <p>Simply submit the errors or items you have found, it's easy! You'll be credited here and on the Subreddit.</p>
        <a href="https://docs.google.com/forms/d/19XIaXoAz5A8XXKjJqBJ2V_WzwrrAdLd2rIPIlWc7F6M/edit?usp=sharing" target="_blank">submit new Krypt Items</a><a href="https://docs.google.com/forms/d/17a6m1iwvrGOzD_XGp9a8_S2dRJtHLAdXG0Ez62j1ytY/edit?usp=sharing" target="_blank">submit errors</a>
    </div>
        
    <div id="maps-menu" class="block">
        <a href="#start" class="active">Dead Woods Cemetery</a>
        <a href="#spidercave">Spider cave</a>
        <a href="#shaokahnstemple">Shao Kahn's Temple</a>
        <a href="#lostmausoleum">Lost Mausoleum</a>
        <a href="#netherrealm">Gallery of Shadows</a>
    </div>
    
    <div id="filters" class="block">
        <a href="#" class="invert" id="invert">Invert filters ⇅</a>
        <a href="#" class="filter" id="inventory">Inventory Item</a>
        <a href="#" class="filter" id="location">Locations</a>
        <a href="#" class="filter" id="fatality" title="Tip! Do not spend your coins on the Fatality items. Look them up and execute them once to unlock them without koins!">Fatality *</a>
        <a href="#" class="filter" id="brutality">Brutality</a>
        <a href="#" class="filter" id="costume">Costume</a>
        <a href="#" class="filter" id="concept-art">Concept Art</a>
        <a href="#" class="filter" id="music">Music</a>
        <a href="#" class="filter" id="koins">Koins</a>
        <a href="#" class="filter" id="modifier">Modifiers</a>
        <a href="#" class="filter" id="skip">Skip Fight</a>
        <a href="#" class="filter"...

CSS

body {
    background:#000;
    color:#FFF;
    font-family:Arial;
    font-size:12px;
}
#wrapper {
    width:1200px;
    margin:20px auto 0;
    white-space:nowrap;
}
.clear {
    clear:both;
}
#header {
    background:url("http://b.thumbs.redditmedia.com/9QoiOXOC5BOcj8IwULFVhLyy8JHhIN1jf-1rrzjI6hg.png") no-repeat left top;
    height:100px;
    background-size:80px;
    padding-left:100px;
    line-height:100px;
    margin-left:220px;
}
a {
    color:#ffb400;
    text-decoration:none;
}
h1 {
    font-size:32px;
}
h2 {
    margin:0;
    padding:5px 0 0;
    font-size:18px;
}

.credits,
h6 {
    text-align:center;
    font-size:11px;
    clear:both;
    width:1200px;
    margin:0 auto;
}

.credits,
.credits a,
h6 {
    color:#666;
}

.credits,
.credits h6 {
    font-size:10px;
    padding-top:5px;
    line-height:12px;
}

.block {
    background:#191716;
    border:1px solid #2d2a28;
    box-sizing:border-box;
    padding:10px;
    margin-bottom:20px;
}

#description {
    text-align:center;
    font-size:14px;
}

#description a {
    border: 1px solid #ffb400;
    background: #4d0400;
    color: #ffb400;
    padding:5px 7px;
    display:inline-block;
    margin:7px 5px;
}

#maps-holder {
    position:relative;
    width:875px;
    margin-left:20px;
    float:left;
}

#popup {
    position:absolute;
    padding:7px;
    opacity:1;
    z-index:2;
    transform:translate(30px, -90%);
    transition:.3s all;
    pointer-events:none;
    border-radius:4px;
    background: #4d0400;
    color: #ffb400;
    top:55px;
    left:0;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

/*Maps menu*/
#maps-menu {
    text-align:center;
}

#maps-menu a {
    display:inline-block;
    margin:0 5px;
    font-weight:bold;
    font-size:16px;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.2);
    padding:5px 7px;
    background-color: #1a1714;
    border: 1px solid #444240;
    color:#979289;

}
#maps-menu a:hover {
    color:#ececec;
}

#maps-menu a.has-item{
   ...

JavaScript

$(function () {
    $("#maps-menu a").click(function(e){
        
        var map = $(this).attr("href");
        
        $("#maps-menu a").removeClass('active');
        $(this).addClass('active');
        
        $("#maps-holder div").hide();
        $("#maps-holder div"+map).show();
        
        e.preventDefault();
    });
    
    $("#maps-holder>div>span").hover(function(e){
        $popup = $("#popup");
        
        $parentId = $(this).parent().attr("id");
                
        x       = $(this).attr("x").toString();
        y       = $(this).attr("y").toString();
        data    = '';
        leftpos = $(this).css("left");
        toppos  = $(this).css("top");
        
        $("#maps-holder>div#"+$parentId+">span").each(function(index, DomEle){
            if(($(DomEle).attr("x").toString() == x) && ($(DomEle).attr("y").toString() == y)) {
                data += '<br />&bull; '+$(DomEle).attr("data");
                console.log($(DomEle));
            }
        });
        
        $popup.css({
            'left': leftpos,
            'top': toppos
        });
        
        $popup.html("<strong>["+x + ", " + y + "]</strong>" + data).css({opacity:1});
        
        e.preventDefault();
    }, function(){
        $("#popup").css({opacity:0});
    });
    
    $("#filters a.filter").click(function(e){
        $this = $(this);
        $class = $this.attr("id");
        $this.toggleClass("off");
        if ($this.hasClass("off")) {
            $("#maps-holder>div>span."+$class).addClass("filter-hide");
        } else {
            $("#maps-holder>div>span."+$class).removeClass("filter-hide");
        }
        e.preventDefault();
    });
    
    $("#filters .invert").click(function(e){
        $("#filters a.filter").click();
        e.preventDefault();
    });
    
    $("#characters a").click(function(e){
        $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
           ...