JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="timeOverlay">
            <div class="reset">
                <a>Reset alarm</a>
            </div>
            <div class="input">
                <h1>Timer</h1>
                <h2 class="colour">Colour</h2>
                <p>Input time below, hrs : mins : secs</p>
                <form class="setTime clearFix">
                    <input type="text" class="h numeric" name="h" placeholder="Hrs" />
                    <input type="text" class="m numeric" name="m" placeholder="Mins" />
                    <input type="text" class="s numeric" name="s" placeholder="Secs" />
                    <input type="submit" value="GO" />
                </form>
                <div class="gv"></div>
            </div>
            <div class="presets">
                <h1>Presets</h1>
                <hr />
                <h2>Get to work!</h2>
                <ul class="presets">
                    <li>
                        Work for 50 mins...
                        <form>
                            <input type="hidden" class="h" name="h" value="0" />
                            <input type="hidden" class="m" name="m" value="50" />
                            <input type="hidden" class="s" name="s" value="0" />
                            <input type="submit" value="GO" />
                        </form>
                    </li>
                    <li>
                        Rest your eyes 'n take 10...
                        <form>
                            <input type="hidden" class="h" name="h" value="0" />
                            <input type="hidden" class="m" name="m" value="10" />
                            <input type="hidden" class="s" name="s" value="0" />
                            <input type="submit" value="GO" />
                        </form>
                    </li>
                </ul>
                <hr />
                <h2>Boil an egg!</h2>
                <ul class="presets">
                    <li>
                   ...

CSS

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
html,body{background:#fff;height:100%;width:100%;font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:15px}
a{text-decoration:none}
hr{background:#bbb;border:0 solid #ccc;height:1px;margin:0 -10px;padding:0}
h1{font-family:Georgia, serif;font-size:18px;font-style:italic;margin:10px 0;padding:0 0 5px}
h2{font-family:Georgia, serif;font-size:15px;font-style:italic;margin:10px 0;padding:0 0 5px}
embed html body{display:none}
p{text-align:left;margin:10px 0;padding:0}
ul{margin:10px 0;padding:0}
li{background:#fff}
form input[type=submit]{background:#fff;border:1px solid #ccc;border-radius:5px;-moz-border-radius:5px;box-shadow:0 0 5px #666;-moz-box-shadow:0 0 5px #666;-webkit-box-shadow:0 0 5px #666;font-family:Helvetica, Arial, sans-serif;font-size:12px;font-weight:700}
form input[type=submit]:hover{background:#fff;box-shadow:0 0 5px #999;-moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999}
form input[type=submit]:active{box-shadow:0 0 1px #ccc;-moz-box-shadow:0 0 1px #ccc;-webkit-box-shadow:0 0 1px #ccc}
div.reset{background:#333;box-shadow:inset 0 0 10px #000;-moz-box-shadow:inset 0 0 10px #000;-webkit-box-shadow:inset 0 0 10px...

JavaScript

function init() {
    $("div.timeContainer > div").stop();
    $("div.timeContainer > div").css({
        width: "0%"
    });
    $("div.reset").slideUp("slow");
    $("audio").remove();
    var a = function (a) {
            return "#000000".substr(0, 7 - a.length) + a
        }((~~ (Math.random() * (1 << 24))).toString(16));
    $("title").text(a);
    $("h2.colour").text(a).css({
        background: a
    });
    $(".timeContainer").css({
        background: a
    });
    $('input[type="submit"]').css({
        "border-color": a
    });
    return a
}
function alarm(a) {
    function c(a, b) {
        $("<source>").attr("src", b).appendTo(a)
    }
    var a = 0;
    var b = $("<audio>", {
        autoload: "autoload"
    });
    c(b, "audio/alarm.mp3");
    c(b, "audio/alarm.wav");
    b.appendTo("body");
    b[0].play();
    $(b).bind("ended", function () {
        if (a != 2) {
            setTimeout(function () {
                b[0].play();
                a++
            }, 300)
        }
    })
}
function timer(a, b, c, d) {
    var e = Math.round(Math.random() * Math.pow(10, 2)) / Math.pow(10, 2);
    var f = c * 5;
    var g = 20 - c;
    $("div.timeContainer > div:nth-child(" + c + ")").css({
        "z-index": g
    });
    $("div.timeContainer > div:nth-child(" + c + ") > div.background").css({
        background: b,
        opacity: e
    });
    $("div.timeContainer > div:nth-child(" + c + ")").animate({
        width: f + "%"
    }, a, function () {
        if (c != 1) {
            c--;
            timer(a, b, c, d)
        } else {
            alarm(d)
        }
    })
}
$(document).ready(function () {
    $('form.setTime > input[type="text"]').keydown(function (a) {
        if (a.keyCode == 46 || a.keyCode == 8 || a.keyCode == 13) {} else {
            if (a.keyCode < 48 || a.keyCode > 57) {
                a.preventDefault()
            }
        }
    });
    while ($("div.timeContainer > div").size() != 20) {
       ...