JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://jqtouch.com/preview/jqtouch/jqtouch.min.js"></script>
<link rel="stylesheet" href="http://jqtouch.com/preview/jqtouch/jqtouch.min.css">
        <div id="home">
            <div class="toolbar">

                <h1>World Clock</h1>
                <a href="#info" class="button leftButton flip">Info</a>
                <a href="#add" class="button add slideup">+</a>
            </div>
            <div id="clocks">
            </div>
        </div>

        <div class="form" id="add">
            <div class="toolbar">
                <h1>New Time Zone</h1>
                <a href="#add" class="cancel">Cancel</a>
            </div>
            <form id="time">
                <ul class="rounded">
                    <li><input type="text" id="label" name="Label" placeholder="Label"></li>

                    <li><select name="timezone" id="timezone">
                          <option value="-12.0">(GMT -12:00) Eniwetok</option>
                          <option value="-11.0">(GMT -11:00) Samoa</option>
                          <option value="-10.0">(GMT -10:00) Hawaii</option>
                          <option value="-9.0">(GMT -9:00) Alaska</option>
                          <option value="-8.0">(GMT -8:00) Pacific Time</option>

                          <option value="-7.0">(GMT -7:00) Mountain Time</option>
                          <option value="-6.0">(GMT -6:00) Central Time</option>
                          <option value="-5.0">(GMT -5:00) Eastern Time</option>
                          <option value="-4.0">(GMT -4:00) Atlantic Time</option>
                          <option value="-3.5">(GMT -3:30) Newfoundland</option>
                          <option value="-3.0">(GMT -3:00) Brazil</option>

                          <option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
                          <option value="-1.0">(GMT -1:00 hour) Azores</option>
                          <option value="0.0" selected>(GMT) Western Europe...

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
}
.clock {
    background: url(/static/assets/jqtouch/demos/clock/img/face.png);
    position: relative;
    width: 78px;
    height: 78px;
    margin: 5px auto;
    overflow: hidden;
}
.hour,.min,.sec {
    width: 9px;
    height: 78px;
    position: absolute;
    top: 0;
    left: 35px;
}
.hour {
    background: url(/static/assets/jqtouch/demos/clock/img/hour.png);
}
.min {
    background: url(/static/assets/jqtouch/demos/clock/img/minute.png);
}
.sec {
    background: url(/static/assets/jqtouch/demos/clock/img/second.png);
}
#clocks > div {
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(#dadadc),to(#b4b3b8));
    border-bottom: 1px solid #9a9fa5;
    border-top: 1px solid #dbdbdd;
    text-shadow: rgba(255,255,255,.5) 0 1px 0;
    position: relative;
}
.city {
    display: block;
    position: absolute;
    top: 35px;
    font-weight: bold;
    color: #333;
    left: 10px;
}
.time {
    display: block;
    position: absolute;
    right: 10px;
    top: 30px;
}
.time span {
}







/* ===================================================================== */
body {
    background: rgb(0,0,0);
}

body > * {
    background: rgb(197,204,211) url(/static/assets/jqtouch/themes/apple/img/pinstripes.png);
}

h1, h2 {
    font: bold 18px Helvetica;
    text-shadow: rgba(255,255,255,.2) 0 1px 1px;
    color: rgb(76, 86, 108);
    margin: 10px 20px 6px;
}

/* @group Toolbar */

.toolbar {
    -webkit-box-sizing: border-box;
    border-bottom: 1px solid #2d3642;
    padding: 10px;
    height: 45px;
    background: url(/static/assets/jqtouch/themes/apple/img/toolbar.png) #6d84a2 repeat-x;
    position: relative;
}

.black-translucent .toolbar {
  margin-top: 20px;
}

.toolbar > h1 {
    position: absolute;
    overflow: hidden;
    left: 50%;
    top: 10px;
    line-height: 1em;
    margin: 1px 0 0 -75px;
    height: 40px;
    font-size: 20px;
   ...

JavaScript

/*
copied and pasted from jqtouch-1.0-beta-2-r109.zip demo/clock by mash,
and modified image path ( the images are copied to http://jsdo.it/ server )

        _/    _/_/    _/_/_/_/_/                              _/       
           _/    _/      _/      _/_/    _/    _/    _/_/_/  _/_/_/    
      _/  _/  _/_/      _/    _/    _/  _/    _/  _/        _/    _/   
     _/  _/    _/      _/    _/    _/  _/    _/  _/        _/    _/    
    _/    _/_/  _/    _/      _/_/      _/_/_/    _/_/_/  _/    _/     
   _/                                                                  
_/

Created by David Kaneda <http://www.davidkaneda.com>
Documentation and issue tracking on Google Code <http://code.google.com/p/jqtouch/>

Special thanks to Jonathan Stark <http://jonathanstark.com/>
and pinch/zoom <http://www.pinchzoom.com/>

(c) 2009 by jQTouch project members.
See LICENSE.txt for license.

If you use jQTouch, please consider supporting its development:
http://bit.ly/support-jqt
*/
$.jQTouch({
    icon: 'icon.png',
    startupScreen: '/static/assets/jqtouch/demos/clock/img/startup.png'
});
$(function(){
    function addClock(label, tz){
        var html = '';
        html += '<div>'
        html +=     '<div class="clock">'
        html +=         '<div class="hour"></div>'
        html +=         '<div class="min"></div>'
        html +=         '<div class="sec"></div>'
        html +=     '</div>'
        html +=     '<div class="city">GMT</div>'
        html +=     '<div class="time">Time</div>'
        html += '</div>'
        var insert = $(html);
        $('#clocks').append(
            insert.data('tz_offset', tz).find('.city').html(label).end()
        );
    }
    function updateClocks(){
        var localTime = new Date();
        $('#clocks > div').each(function(){
            var tz_offset = $(this).data('tz_offset') || 0;
            var ms = localTime.getTime()
                 + (localTime.getTimezoneOffset() * 60000)
                 + (tz_offset + 1) *...