JSFiddle - React, Tailwind, and code Playground

by AntonTrollback

HTML

<p>
    drag to bookmark bar:
    <a href="javascript:(function() { window.accurateInterval = function(time, fn) { var cancel, nextAt, wrapper, _ref; nextAt = new Date().getTime() + time; window.timeout = null; if (typeof time === 'function') _ref = [time, fn], fn = _ref[0], time = _ref[1]; wrapper = function() { nextAt += time; window.timeout = setTimeout(wrapper, nextAt - new Date().getTime()); return fn(); }; cancel = function() { return clearTimeout(windowtimeout); }; timeout = setTimeout(wrapper, nextAt - new Date().getTime()); return { cancel: cancel }; }; }).call(this);var bpm = prompt('enter bpm:'); clearTimeout(window.timeout); bpm = parseFloat(bpm); if(isNaN(bpm)) {bpm = 120} console.log(bpm); $elm = $('.popover-body a'); var beat = accurateInterval(1000 * 60 / bpm, function() { $elm.click(); });">Strobe</a>
    <span>⤴</span>
</p>

CSS

* {
    margin: 0;
    padding: 0;
}

p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 32px;
    white-space: nowrap;
}

span {
    position: relative;
    top: -8px;
}