JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* ------------------------------------- */
/* 1. Generic styles ................... */
/* ------------------------------------- */
body {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;ns;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #20232D; }

p, a {
  text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(255, 255, 255, 0.8);
  margin: 0.8em 0;
  font-size: 18px;
  color: rgba(128, 255, 128, 0.8); }

a {
  -webkit-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -ms-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 0.2s cubic-bezier(0.42, 0, 0.58, 1);
  cursor: pointer;
  text-decoration: none;
  color: rgba(128, 255, 128, 0.6);
  text-shadow: 0 0 1ex rgba(51, 255, 51, 0.6), 0 0...

JavaScript

$(window).load(function() {

    (function () {
    var $animate, $container, $message, $paragraph, MESSAGES, animate, initialise, scramble;
    MESSAGES = [];
    MESSAGES.push({
        delay: 0,
        text: '> Упс, Ошибочка 404 - Страница не найдена...'
    });
    MESSAGES.push({
        delay: 1200,
        text: 'Запрашиваемая страница не найдена. '
    });
    MESSAGES.push({
        delay: 2200,
        text: 'Возможно, Вы, неправильно ввели адрес страницы<br /> или страница была удалена.'
    });
    MESSAGES.push({
        delay: 3600,
        text: 'Теперь здесь ничего нет,<br /> кроме красной и синей таблетки ...'
    });
    MESSAGES.push({
        delay: 5200,
        text: 'Нажмите на ссылки ниже, чтобы сделать свой выбор.<br /><br />> Спасибо!<br /><br />'
    });
    $container = $('#container');
    $message = $('#message');
    $animate = $('#animate');
    $paragraph = null;
    scramble = function (element, text, options) {
        var $element, addGlitch, character, defaults, ghostCharacter, ghostCharacters, ghostLength, ghostText, ghosts, glitchCharacter, glitchCharacters, glitchIndex, glitchLength, glitchProbability, glitchText, glitches, i, k, letter, object, order, output, parameters, ref, results, settings, shuffle, target, textCharacters, textLength, wrap;
        defaults = {
            probability: 0.2,
            glitches: '-|/\\',
            blank: '',
            duration: text.length * 40,
            ease: 'easeInOutQuad',
            delay: 0
        };
        $element = $(element);
        settings = $.extend(defaults, options);
        shuffle = function () {
            if (Math.random() < 0.5) {
                return 1;
            } else {
                return -1;
            }
        };
        wrap = function (text, classes) {
            return '<span class="' + classes + '">' + text + '</span>';
        };
        glitchText = settings.glitches;
        glitchCharacters = glitchText.split('');
       ...