JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "viewport" content = "width = 1024">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>

<title>Ordering System</title>

</head>
<body ontouchmove="blockMove(event);">

<div id="allorders" class="orderslistpanel">
    <div id="orderfilterbar" class="controlbar">
        <div id="orderfilter_all" class="orderfilterbuttons">1</div>
        <div id="orderfilter_ta" class="orderfilterbuttons">2</div>
        <div id="orderfilter_dine" class="orderfilterbuttons">3</div>
        <div id="orderfilter_del" class="orderfilterbuttons">4</div>
    </div>
</div>
<div id="itemslistpanel">
itemslistpanel
</div>
<div id="additembar" class="controlbar">add item</div>


<div id="rpanel" class="rightpanel">Order detail</div>

<div id="topleftbar" class="controlbar">
    <div id="sort" class="controlbutton">sort</div>
    <div id="neworder" class="controlbutton controlbuttonright">new order</div>
</div>

<div id="toprightbar" class="controlbar">title
    <div id="sparerightleft" class="controlbutton">something</div>
    <div id="help" class="controlbutton controlbuttonright">something</div>
</div>

<div id="bottombar">
    <div id="bottombar1" class="bottombaritems">Menu 1</div>
    <div id="bottombar2"class="bottombaritems">Menu 2</div>
    <div id="bottombar3"class="bottombaritems">Menu 3</div>
    <div id="bottombar4"class="bottombaritems">Menu 4</div>
    <div id="bottombar5" class="bottombaritems">Menu 5</div>
</div>

<div id="itembrowser">
        <div id="normalpanel" class="browserleftpanel">
        <div class="browserbuttons">1</div>
        <div class="browserbuttons">2</div>
        <div class="browserbuttons">3</div>
        <div class="browserbuttons">4</div>
    ...

CSS

* {
    margin: 0px;
    padding: 0px;
    font: 10px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

.rightpanel {
    position: absolute;
    left: 512px;
    top: 40px;
    right: 0px;
    bottom: 40px;
    height: 944px;
    background: #eee;
}

.orderslistpanel { /*left most panel*/
    width: 256px;
    top: 40px;
    left:  0px;
    bottom: 0px;
    height: 986px;
    position: absolute;
    background-color: green;
}

#itemslistpanel { /*middle panel*/
    width: 256px;
    left:  256px;
    top: 80px;
    min-height: 688px;
    position: absolute;
    background-color: beige;
    -webkit-transition-duration: 0s;
    transition-timing-function: cubic-bezier(0,1,0.4,0.89);
}

#topleftbar {
    left: 0px;
    width: 256px;
    background-color: grey;
}

.controlbar {
    position: absolute;
    top: 0px;
    height: 40px;
    text-align: center;
}

#toprightbar {
    right: 0px;
    left: 256px;
    background-color: yellow;
}

#bottombar {
    position: absolute;
    height:  40px;
    bottom: 0px;
    right: 0px;
    left: 512px;
    background-color: black;
    color: white;
}

.bottombaritems {
    position: relative;
    float: left;
    width: 102px;
    height: 100%;
    text-align: center;
}

.controlbutton {
    top: 0px;
    height: 100%;
    width: 100px;
    position: absolute;
    text-align: center;
    background-color: blue;
}

.controlbuttonright {
    right: 0px;    
}

#orderfilterbar {
    padding-left: 12px;
    width: 244px;
    background-color: cyan;
}

.orderfilterbuttons {
    width: 58px;
    height: 100%;
    position: relative;
    float: left;
    background-color: red;
}

#additembar {
    top: 40px;
    left: 256px;
    width: 256px;
    background-color: orange;
}

#itembrowser {
    width: 100%;
    height: 400px;
    bottom: -402px;
    position: absolute;
    background-color: white;
    -webkit-transition: -webkit-transform 0.05s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-box-shadow: 0 0...

JavaScript

function blockMove(event) {
    // Tell Safari not to move the window.
    event.preventDefault();
}

function showpanelnum(panelnum) {
    // bring selected panel to front
    // or hide other panels
    // store previous panel, or order of all panels
    // use z-index and array to control all panels
    alert(panelnum);
}

function show_itemdetail() {
    $('#browseritemdetail').css('display', 'inline');
    $('#browserresults').css('display', 'none');
    $('#browserrightitemdetailbar').css('display', 'inline');
    $('#browserrightresultsbar').css('display', 'none');
}

function show_resultspanel() {
    $('#browseritemdetail').css('display', 'none');
    $('#browserresults').css('display', 'inline');
    $('#browserrightitemdetailbar').css('display', 'none');
    $('#browserrightresultsbar').css('display', 'inline');
}

var $itembrowseron = false;
function toggle_itembrowser() {
    if (!$itembrowseron) {
        document.getElementById('itembrowser').style.webkitTransform = 'translateY(-401px)';
        $itembrowseron = true;
    } else {
        document.getElementById('itembrowser').style.webkitTransform = 'translateY(1px)';
        $itembrowseron = false;
    }
}

function scrollpane(event) {
    var touch = event.touches[0];
    $itemlistpos = touch.pageY-$touchstartitemlisty+$itemlistdelta;
    if ($itemlistpos > 0) {
        var $scrollfactor = 0.3/(1+$itemlistpos/425);
    } else {
        var $scrollfactor = 1;
    }
    document.getElementById('itemslistpanel').style.webkitTransform = 'translateY('+($scrollfactor*$itemlistpos)+'px)';
}

function nothing() {
}

var $itemlistpos = 0;
var $itemlistdelta = 0;
var $touchenditemlisty = 0;
var $touchstartitemlisty = 0;

var $hasbeenready = false;
$(document).ready(function(){
    document.getElementById('itemslistpanel').addEventListener('touchstart', function(event) {
        $('#itemslistpanel').css('-webkit-transition-duration', '0s');
        $touchstartitemlisty = event.touches[0].pageY;
    },...