JSFiddle - React, Tailwind, and code Playground

by voodoomonkey

HTML

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<div id="cloudnote" data-url="cloudnote" data-role="page" data-theme="b">
    <div data-role="header" data-position="fixed" id="top-toolbar">
        <ul id="buttonbar">
            <li class="buttonGroup"><span class="box1"> <span aria-hidden="true" class="icon-pencil"></span></span>&nbsp;&nbsp;&nbsp;Toggle Theme</li>
            <li class="buttonGroup">Show editor</li>
            <li class="buttonGroup"><span class="box1"> <span aria-hidden="true" class="icon-location"></span></span>&nbsp;&nbsp;&nbsp;Show html</li>
            <li class="buttonGroup"><span class="box1"> <span aria-hidden="true" class="icon-calendar"></span></span>&nbsp;&nbsp;&nbsp;Show pdf</li>
        </ul>
        <div class="divider"></div> <span class="mobilebutton"><span class="box1"> <span aria-hidden="true" class="icon-disk"></span></span>&nbsp;&nbsp;&nbsp;Save</span>
    </div>
    <div data-role="content" id="wrapper">
        <textarea name="" id="editor" rows="" cols=""></textarea>
    </div>
</div>

CSS

* {
    padding:0;
    margin:0
}
#cloudnote{
    background-color:#aaa
}
#editor {
    background:none;
    margin:0;
    padding:5px;
    -webkit-box-shadow: none;
    height:auto;
    width:100%;
    border:none;
}
#wrapper {
    position:absolute;
    top:70px;
    left:50px;
    right:50px;
    bottom:50px;
    background-color:#fff;
    -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    padding:5px;
}
.divider {
    display:block;
    width: 1px;
    margin-left:15px;
    margin-right:15px;
    float:left;
    height:40px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 2px #757575;
    -moz-box-shadow: 0 0 2px #757575;
    box-shadow: 0 0 2px #757575;
}
.spacer {
    width:30px;
    height:40px;
    display:block;
    float:left;
}
#top-toolbar {
     width: 100%;
  
    -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    box-shadow: 0 10px 50px rgba(0, 0, 0, .5);
    font-family: sans-serif;
    font-size: 0.7em;
    letter-spacing: 0.05em;
    font-weight: bold;
    z-index:9999 !important;
    background-color: #6b6d71;
    color: #403e3d;
    text-shadow: 0 1px 1px #fff;
    border-bottom: 1px solid #ddd;
    background-image: -webkit-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: -moz-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: -o-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: -ms-linear-gradient(bottom, #d8d4d2, #fcfcfc);
    background-image: linear-gradient(to top, #d8d4d2, #fcfcfc);
    margin:0;
    padding:7px;
}
#buttonbar {
    list-style-type: none;
    cursor:pointer;
}
li.buttonGroup {
    padding:10px;
    float:left;
    display:block;
}
#buttonbar li.buttonGroup {
    padding:7px;
    cursor: pointer;
    display:block;
    float:left;
    background-color: #6b6d71;
    -webkit-box-shadow: 0 1px 1px #fff,...

JavaScript

function tapped(event) {
    var touchable = 'ontouchstart' in document.documentElement;
    if ((touchable && event.which === 0) || (!touchable && event.which === 1)) {
        return true;
    }
    return false;
}

$('.buttonGroup').bind('touchstart click', function (event) {
    if (tapped(event)) {

        $(this).toggleClass('active').siblings().removeClass('active');

    };
});