JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<!-- container -->
<div id="container">
    
<!-- menu -->
        <div id="menu">
            <ul id="">
                <li id="" class="first"><img src="http://www.multiq.com/img/multiQlogo.gif" alt="logo" /></li>
                <li id="" class="last"><button id="logout-btn">Logout</button></li>
                <li id=""><button id="menu-tour-btn">Tour</button></li>
                <li id=""><button id="menu-quad-btn">Quads</button></li>
                <li id="" class="active-list-itm"><button id="menu-cams-btn" class="active-menu-itm">Cameras</button></li>
            </ul>
        </div>
<!-- /menu -->
    
    <!-- content -->
    <div id="content">  
        
<!-- cams -->
        <div id="cams-content">
                <h1 id="">Cameras</h1>
                <ul id="">
                    <li id=""><span class="itm"><span class="itm-title">cam 1</span> <span class="meta url">url</span> <span class="meta res">resolution/streaming profile</span><span class="meta stream"></span></span> <span class="toolbar"><button id="" class="ed-btn ed-cam-url" name="modal" title="#dialog-ed-cam-url-1">edit</button><button id="" class="del-btn del-cam" name="modal" title="#dialog-del-cam-1">-</button></span></li>
                    <li id=""><span class="itm"><span class="itm-title">cam 2</span> <span class="meta url">url</span> <span class="meta res"></span><span class="meta stream">stream</span></span> <span class="toolbar"><button id="" class="ed-btn ed-cam-stream" name="modal" title="#dialog-ed-cam-stream-2">edit</button><button id="" class="del-btn del-cam" name="modal" title="#dialog-del-cam-2">-</button></span></li>
                </ul>
                <hr />
                    <div id="" class="add-cam">
                    <button id="" class="add-cam-btn">Add camera</button>
                    <h2 id="" class="add-cam-title">Add camera</h2>
                    <ul id="" class="add-cam-list">
                        <li id=""><span class="itm"><span...

CSS

/* Main styles */

body {
    margin:  0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    background-color: #fff;
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

h1, h2, h3, h4 {
    color: #5FABDA;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 25px;
    font-weight: normal;
}

h2 {
    font-weight:  normal;
    font-size: 18px;
    color: #5FABDA;
}
.subheader {
    color: #aaa;
}


hr {
    clear: both;
    visibility: hidden;
}

button,
button:visited {
    height: 38px;
    text-shadow: 0 1px 0 #fff;
    border: 1px solid;
    border-color: #ccc;
    border-bottom-color: #aaa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(top,#f6f6f6 0,#ccc 100%);
    background-image: -ms-linear-gradient(top,#f6f6f6 0,#ccc 100%);
    background-image: -o-linear-gradient(top,#f6f6f6 0,#ccc 100%);
    background-image: -moz-linear-gradient(top,#f6f6f6 0,#ccc 100%);
    background-image: linear-gradient(to bottom,#f6f6f6 0,#ccc 100%);
    -webkit-box-shadow: inset 0 0 1px #fff;
    -moz-box-shadow: inset 0 0 1px #fff;
    box-shadow: inset 0 0 1px #fff;
    font-size: 12px; 
    line-height: 1; 
    color: #444;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0;
    padding: 0 15px;
    position: relative;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    word-wrap: normal;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

button:active,
button.active,
#menu li button.active-menu-itm,
.del-btn:active,
#menu li button#logout-btn:active {
    text-shadow: 0 1px 0 #fff;
    background-color: #ddd;
    background-image: -webkit-linear-gradient(top,#ccc 0,#d3d3d3 100%);
    background-image: -ms-linear-gradient(top,#ccc 0,#d3d3d3 100%);
    background-image:...

JavaScript

$(document).ready(function() {
    
// hide content
    
    $('#quad-content').hide();
    $('#tour-content').hide();

// hide extra content

    $('.add-cam-adv').hide();
    $('.add-cam-title').hide();
    $('.add-cam-list').hide();
    $('.add-quad fieldset').hide();
    $('.add-quad-list').hide();

// hide form content

    $('.add-new-quad-btn').hide();
    $('.ed-quad-list').hide();
    $('.add-cam-adv-url-res').hide();
    $('.add-cam-adv-url-res-scale').hide();
    $('.add-new-cam-adv-url-submit-btn').hide();
    $('.add-cam-quad-url-res').hide();
    $('.add-cam-quad-url-res-scale').hide();
    $('.add-new-cam-quad-url-submit-btn').hide();

// menu: cameras

$('#menu-cams-btn').click(function() {
    $('#tour-content').hide();
    $('#quad-content').hide();
    $('#menu-quad-btn').removeClass("active-menu-itm");
    $('#menu-tour-btn').removeClass("active-menu-itm");
    $('#menu-cams-btn').toggleClass("active-menu-itm");
    $('.add-cam-adv').hide();
    $('.add-cam-title').hide();
    $('.add-cam-list').hide();
    $('#cams-content').toggle(200);
    $('.add-cam-btn').show();
});

// menu: quads

$('#menu-quad-btn').click(function() {
    $('#cams-content').hide();
    $('#tour-content').hide();
    $('#menu-cams-btn').removeClass("active-menu-itm");
    $('#menu-tour-btn').removeClass("active-menu-itm");
    $('#menu-quad-btn').toggleClass("active-menu-itm");
    $('#quad-content').toggle(200);
    $('.divider').hide();
    $('.add-quad fieldset').hide();
    $('.add-quad-list').hide();
    $('.add-new-quad-btn').hide();
    $('.add-quad-btn').show();
});

// menu: guard tour

$('#menu-tour-btn').click(function() {
    $('#cams-content').hide();
    $('#quad-content').hide();
    $('#menu-quad-btn').removeClass("active-menu-itm");
    $('#menu-cams-btn').removeClass("active-menu-itm");
    $('#menu-tour-btn').toggleClass("active-menu-itm");
    $('#tour-content').toggle(200);
});

// add camera form

$('.add-cam-btn').click(function() {
   ...