JSFiddle - React, Tailwind, and code Playground

Creating the QLOCKTWO in HTML5, CSS and Javascript http://codepen.io/FWeinb/pen/oyACz

by Jennifer Perrin

HTML

<div id="clock">
    <span id="e0">●</span>
    <span id="e1">●</span>
    <span id="e2">‌●</span>
    <span id="e3">‌●</span>
    <div id="letters">
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

* { box-sizing: border-box; }

body{
  font-family:'Yanone Kaffeesatz', Arial, "Trebuchet MS", sans-serif;
  background-color:#111;
  margin: 50px auto;
}

#clock{
  position:relative;
  display:block;
  color:#111;
  font-size:30px;
  background: #000 url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
  width:400px;
  padding:70px;
  margin:0 auto;
  border: 10px #444 solid;
}

#letters, #letters span{
   display:inline-block;
   line-height:41px;
   text-align:center;
   transition:all 0.5s linear;
}
#letters span{
    width:35px;
}

.light{
  color:#fff !important;
  text-shadow: 0px 0px 5px #fff;
}

/* dots in the edge for showing the minutes */
#e0,#e1,#e2,#e3{ 
    position:absolute;
    color:black;    
    font-size:15px;
}

#e0, #e1{
  top:15px;
}
#e2, #e1{
  right:25px;
}
#e0, #e3{
  left:25px;
}
#e2, #e3{
  bottom:20px;
}

JavaScript

var language = {};

language['english'] = {
    map: [["I", "T", "L", "I", "S", "B", "F", "A", "M", "P", "M"],
          ["A", "C", "Q", "U", "A", "R", "T", "E", "R", "D", "C"],
          ["T", "W", "E", "N", "T", "Y", "F", "I", "V", "E", "X"],
          ["H", "A", "L", "F", "B", "T", "E", "N", "F", "T", "O"],
          ["P", "A", "S", "T", "E", "R", "U", "N", "I", "N", "E"],
          ["O", "N", "E", "S", "I", "X", "T", "H", "R", "E", "E"],
          ["F", "O", "U", "R", "F", "I", "V", "E", "T", "W", "O"],
          ["E", "I", "G", "H", "T", "E", "L", "E", "V", "E", "N"],
          ["S", "E", "V", "E", "N", "T", "W", "E", "L", "V", "E"],
          ["T", "E", "N", "S", "E", "O'", "C", "L", "O", "C", "K"]],
    sentences: {
        start: {
            all: [[0, 0, 1], [0, 3, 4]]
        },
        end: {
            all: [[9, 5, 10]]
        },
        hours: {
            0: [[[8, 5, 10]]],
            1: [[[5, 0, 2]]],
            2: [[[6, 8, 10]]],
            3: [[[5, 6, 10]]],
            4: [[[6, 0, 3]]],
            5: [[[6, 4, 7]]],
            6: [[[5, 3, 5]]],
            7: [[[8, 0, 4]]],
            8: [[[7, 0, 4]]],
            9: [[[4, 7, 10]]],
            10: [[[9, 0, 2]]],
            11: [[[7, 5, 10]]],
            12: [[[8, 5, 10]]]
        },
        minutes: {
            5: [[2, 6, 9], [4, 0, 3]],
            10: [[3, 5, 7], [4, 0, 3]],
            15: [[1, 2, 8], [4, 0, 3]],
            20: [[2, 0, 5], [4, 0, 3]],
            25: [[2, 0, 9], [4, 0, 3]],
            30: [[3, 0, 3], [4, 0, 3]],
            35: [[2, 0, 9], [3, 9, 10]],
            40: [[2, 0, 5], [3, 9, 10]],
            45: [[1, 2, 8], [3, 9, 10]],
            50: [[3, 5, 7], [3, 9, 10]],
            55: [[2, 6, 9], [3, 9, 10]]
        },
        incrementHourAt: 29
    }
};

var wordClock = {
    seconds: {
        0: [[[2, 1, 3], [3, 0], [3, 4], [4, 0], [4, 3], [4, 4], [5, 0], [5, 2], [5, 4], [6, 0], [6, 1], [6, 4], [7, 0], [7, 4], [8, 1, 3]]],
        1: [[[2, 2], [3, 1],...