JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="container tall-container">
    <section class="list-switcher vertical-center">
        <div class="list-switcher-table">
            <div class="list-switcher-row">
                <div class="list-switcher-sprites">
                    <img class="list-switcher-sprite" data-itemid="1" src="http://i.imgur.com/v6TtaVj.png">
                    <img class="list-switcher-sprite" data-itemid="2" src="http://i.imgur.com/imdZ4TD.png">
                    <img class="list-switcher-sprite" data-itemid="3" src="http://i.imgur.com/v6TtaVj.png">
                    <img class="list-switcher-sprite" data-itemid="4" src="http://i.imgur.com/imdZ4TD.png">
                    <img class="list-switcher-sprite" data-itemid="5" src="http://i.imgur.com/v6TtaVj.png">
                    <img class="list-switcher-sprite" data-itemid="6" src="http://i.imgur.com/imdZ4TD.png">
                </div>
                <dl class="list-switcher-items">
                    <dd class="list-switcher-item" data-itemid="1"><a href="#">Kitchen</a></dd>
                    <dd class="list-switcher-item" data-itemid="2"><a href="#">Dining</a></dd>
                    <dd class="list-switcher-item" data-itemid="3"><a href="#">Laundry</a></dd>
                    <dd class="list-switcher-item" data-itemid="4"><a href="#">Lounge</a></dd>
                    <dd class="list-switcher-item" data-itemid="5"><a href="#">Bedroom</a></dd>
                    <dd class="list-switcher-item" data-itemid="6"><a href="#">Bathroom</a></dd>
                </dl>
                <div class="list-switcher-categories-wrap">
                    <dl class="list-switcher-categories" data-itemid="1">
                    <dd class="list-switcher-category"><a href="#">Dummy #5</a></dd>
                        <dd class="list-switcher-category"><a href="#">Dummy #6</a></dd>
                        <dd class="list-switcher-category"><a href="#">Dummy #7</a></dd>
                        <dd...

CSS

html, body {
    height: 100%;
    margin: 0px;
    font-family: 'District', sans-serif;
    color: #666257;
	font-size: 16px;
}
body {
	background-image: url("http://i.imgur.com/v6TtaVj.png");
    background-size: cover;
    background-position: center center;
    -webkit-transition: background ease-in .5s;
    -moz-transition: background ease-in .5s;
    -o-transition: background ease-in .5s;
    transition: background ease-in .5s;
}

a { text-decoration:none; }

/* List Switcher */
.container { width: 900px;margin:0px auto; }
.tall-container {
    height: 100%;
}
.list-switcher {
    white-space: nowrap !imortant;
    height: 100%;
    font-size: 0;
}
.list-switcher dl a {
    font-family: 'District', sans-serif;
	font-size:80px; 
	color: #ffffff;
}
.list-switcher-table {
    padding: 15px;
    white-space: normal;
    display: table;
}
.list-switcher-row {
    display: table-row;
}
.list-switcher dl,
.list-switcher dd {
    margin: 0;
}
.list-switcher dd {
    display: inline-block;
}

.list-switcher-categories > dd:after { content:"/"; padding: 0 7px; color: red; } 
.list-switcher-categories > dd:last-child:after { content:"";  }

.list-switcher-sprites {
    width: 0px;
    font-size: 0px;
}
.list-switcher-sprite {
    width: 0px;
    height: 0px;
}
.list-switcher-items {
    display: table-cell;
}
.list-switcher-categories-wrap {
    display: none;
}
.list-switcher-categories-wrap.active {
    width: 100%;
    display: table-cell;
}
.list-switcher-categories {
    transition: all 1s linear;
    display: none;
}
.list-switcher-categories.active {
    display: block;
    position: relative;
}
.list-switcher-category {
    display: inline-block;
    padding: 15px;
}
.list-switcher-category a {
    font-size: 16px !important;
}
.side-thingy {
    display: table-cell;
    width: 100%;
    height: 0;
    position: relative;
}
.side-thingy-inner {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}
.side-thingy-text {
    position: absolute;
   ...

JavaScript

(function ($, root, undefined) {
	
	$(function () {
		
		'use strict';
		
	var ListSwitcher = function(selector) 
{
    if (!(this instanceof ListSwitcher))
    {
        return;
    }
    
    var app = this;
    
    app.nodes = {};

    app.nodes.switcher = document.querySelector(selector);

    app.nodes.sidethingy = app.nodes.switcher.querySelector('.side-thingy');
    
    app.nodes.vcenter = app.nodes.switcher.querySelector('.list-switcher-vcenter');

    app.nodes.table = app.nodes.switcher.querySelector('.list-switcher-table');
    
    app.nodes.row = app.nodes.switcher.querySelector('.list-switcher-row');

    app.nodes.spritewrap  = app.nodes.switcher.querySelector('.list-switcher-sprites');

    app.nodes.sprites = [].slice.call(app.nodes.spritewrap.querySelectorAll('.list-switcher-sprite'));

    app.nodes.itemwrap = app.nodes.switcher.querySelector('.list-switcher-items');

    app.nodes.items = [].slice.call(app.nodes.itemwrap.querySelectorAll('.list-switcher-item'));

    app.nodes.activeitem = null;
    
    app.nodes.categorywrap = app.nodes.switcher.querySelector('.list-switcher-categories-wrap');

    app.nodes.categories = [].slice.call(app.nodes.switcher.querySelectorAll('.list-switcher-categories'));

    app.nodes.activecategory = null;

    app.funcs = {};

    app.funcs.setActiveItem = function(item)
    {
        if (app.nodes.activeitem !== null)  
        {
            app.nodes.activeitem.className = app.nodes.activeitem.className.replace(/\s+active/g, '');
        }
      
        if (typeof item === 'undefined')
        {
            app.nodes.activeitem = null;
            return;
        }

        app.nodes.activeitem = item;
        app.nodes.activeitem.className += ' active'; 
    };

    app.funcs.setActiveCategories = function(item)
    {
        if(app.nodes.activecategory !== null)
        {
            app.nodes.activecategory.className = app.nodes.activecategory.className.replace(/\s+active/g, '');
        }
      
    ...