JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<section>
    <article class="hour">0</article>
    <article class="hour">0</article>
    <article class="minute">0</article>
    <article class="minute">0</article>
    <article class="second">0</article>
    <article class="second">0</article>
    <article class="fraction">00</article>
</section>

CSS

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
    color: yellow;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
section {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -moz-box-align: center;
    box-pack: center;
    box-align: center;
    position: relative;
    top: 0;
    left: 0;
    -moz-transation: top 1s linear,
        left 1s linear;
}
section>article.hour:nth-child(2):after,
section>article.minute:nth-child(4):after {
    content: ':'
}
section>article.fraction {
    font-size: 0.5em;
}
section>article {
    cursor: move;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

JavaScript

(function ($) {
    $.fn.draggable = function () {
        var grab,
            drag,
            drop,
            hMouseOffset,
            vMouseOffset;
        grab = function (event) {
            var thisOffset = $(this).offset();
            hMouseOffset = event.pageX - thisOffset.left;
            vMouseOffset = event.pageY - thisOffset.top;
            $(this).bind('mousemove', drag);
            $(this).one('mouseup', drop);
        };
        drag = function (event) {
            $(this).offset({
                left: event.pageX - hMouseOffset,
                top: event.pageY - vMouseOffset
            });
        };
        drop = function (event) {
            event.preventDefault();
            $(this).unbind('mousemove');
        };
        return this.bind('mousedown', grab);
    };
}(jQuery));
jQuery(function ($) {
    $('section').draggable();
});