JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="flipclock" class="contents-data play">


    <div class="flipclock-con">
        <ul class="flip flip-hour">
            <li class="before">
                <span>
                    <div class="flip-up">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                    </div>
                    <div class="flip-down">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                        <div class="flip-apm">AM</div>
                    </div>
                </span>
            </li>
            <li class="active">
                <span>
                    <div class="flip-up">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                    </div>
                    <div class="flip-down">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                        <div class="flip-apm">AM</div>
                    </div>
                </span>
            </li>

        </ul>
        <ul class="flip flip-minute">
            <li class="before">
                <span>
                    <div class="flip-up">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                    </div>
                    <div class="flip-down">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                    </div>
                </span>
            </li>
            <li class="active">
                <span>
                    <div class="flip-up">
                        <div class="flip-shadow"></div>
                        <div class="flip-text">00</div>
                    </div>
                    <div class="flip-down">
                        <div...

CSS

.showme{opacity:1 !important;transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-webkit-transition:opacity 0.3s linear;-o-transition:opacity 0.3s linear}.show-pantone{opacity:1 !important;transition:opacity 0.5s cubic-bezier(.55,.055,.675,.19);-moz-transition:opacity 0.5s cubic-bezier(.55,.055,.675,.19);-webkit-transition:opacity 0.5s cubic-bezier(.55,.055,.675,.19);-o-transition:opacity 0.5s cubic-bezier(.55,.055,.675,.19)}.show-fwa{opacity:1 !important;transition:opacity 0.5s cubic-bezier(.39,.575,.565,1);-moz-transition:opacity 0.5s cubic-bezier(.39,.575,.565,1);-webkit-transition:opacity 0.5s cubic-bezier(.39,.575,.565,1);-o-transition:opacity 0.5s cubic-bezier(.39,.575,.565,1)}.hide-fwa{opacity:0 !important;transition:opacity 0.5s cubic-bezier(.47,0,.745,.715);-moz-transition:opacity 0.5s cubic-bezier(.47,0,.745,.715);-webkit-transition:opacity 0.5s cubic-bezier(.47,0,.745,.715);-o-transition:opacity 0.5s cubic-bezier(.47,0,.745,.715)}html{width:100%;height:100%}*{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;outline:0;margin:0;padding:0}::selection{background:transparent}body{width:100%;height:100%;margin:0;padding:0;color:#fff;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}#block{position:absolute;left:0;top:0;width:100%;height:100%;z-index:997;display:none}#root{overflow:hidden;width:100%;height:100%;position:relative;min-width:900px;min-height:645px;background-color:#fff}#fwa{z-index:999;width:100px;height:100px;position:absolute;left:0;top:0;pointer-events:none}#fwa-sotd{position:absolute;z-index:1;width:100%;height:100%;background:url(/images/fwa.png) 0 0}#fwa-adobe{position:absolute;z-index:3;width:100%;height:100%;background:url(/images/fwa.png) -120px 0;opacity:0}#fwa-motd{position:absolute;z-index:5;width:100%;height:100%;background:url(/images/fwa.png) -240px...

JavaScript

var FlipClock = FlipClock || (function () {
    var _isPaused = false,
        _curSec = 0,
        _curMin = 0,
        _curHour = 0,
        _saveSec, _saveMin, _saveHou;

    function init() {
        _isPaused = false;
    }

    function start() {
        _curSec = 0;
        _curMin = 0;
        _curHour = 0;
        var currentTime = new Date(),
            minutes = currentTime.getMinutes(),
            seconds = currentTime.getSeconds(),
            hours = currentTime.getHours();
        _saveMin = minutes;
        _saveHou = hours;
        minute(minutes);
        hour(hours);
        second(seconds);
        TweenLite.delayedCall(1, engin);
    }

    function dispose() {
        _isPaused = true;
        TweenLite.killDelayedCallsTo(engin);
    }

    function pause() {
        _isPaused = true;
        TweenLite.killDelayedCallsTo(engin);
    }

    function resume() {
        _isPaused = false;
        engin();
    }

    function resize() {}

    function engin() {
        if (_isPaused) return;
        TweenLite.delayedCall(1, engin);
        var currentTime = new Date(),
            minutes = currentTime.getMinutes(),
            seconds = currentTime.getSeconds(),
            hours = currentTime.getHours();
        if (_saveSec != seconds) {
            _saveSec = seconds;
            second(seconds);
        }
        if (_saveMin != minutes) {
            _saveMin = minutes;
            minute(minutes);
        }
        if (_saveHou != hours) {
            _saveHou = hours;
            hour(hours);
        }
    }

    function second(seconds) {
        $("#flipclock").removeClass("play");
        var curli = $("ul.flip-second li.active"),
            nextli;
        if (curli.html() == undefined) {
            curli = $("ul.flip-second li").eq(0);
            curli.addClass("before").removeClass("active").next("li").addClass("active").closest("#flipclock").addClass("play");
            _curSec = 0;
        } else if...