JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="container">
    <div class="console">Loading</div>
    <input type="text" class="input" />
    <div class="overlay"></div>
</div>

SCSS

@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);

html {
    height: 100%;
    position: relative;
}

body {
    color: purple;
    background: black;
    font-family: 'Press Start 2P' !important;
    font-style: normal;
    height: 100%;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.6em;
    padding: 0;
    margin: 0;
}

.container {
    position: relative;
    min-height: 100%;
}
.console {
    margin: 50px;
}
.console p {
    color: green;
    text-shadow: 0 0 21px rgba(100, 255, 100, 0.3);
}

.console p.error {
    color: #CE5151;
    text-shadow: 0 0 21px rgba(255, 100, 100, 0.3);
}

.input {
    opacity: 0;
}

.blendmodeSupport .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    mix-blend-mode: overlay;
    opacity: 0.5;
    background-size: 7.5px;
    background-image:...

JavaScript

var texts = [
    "Hello.",
    "My name is Kenneth Brøgger-Luplau.",
    "Developer. Designer. Father. Husbond.",
    "Enter secret passphrase to continue..."
];

$.fn.typingText = function(texts, options) {
    var $console = $(this);
    
    $("body").toggleClass("blendmodeSupport", window.getComputedStyle(document.body).mixBlendMode);
    
    var defaultOptions = {
        pre: "",
        blinkingLead: true,
        typingSpeed: "16",
        typingType: "linear",
        delay: 500,
        typeLead: "_",
        onEnter: $.noop
    };
    
    //Merge options
    options = $.extend(defaultOptions, options);
    
    var console = {
        ready: false,
        error: function(error) {
            $console.find("p").last().find(".lead").remove();
            $console.append("<p class='error'><span class='message'>" + error + "</span>");
            this.newLine();
        },
        clear: function() {
            $console.empty();
        },
        newLine: function(userInput) {
            if (userInput && !console.ready) {
                return false;
            }
            
            $console.find("p").last().find(".lead").remove();
            
            //Prepend the console with prefix
            $console.append("<p><span class='pre'>" + options.pre + "</span> <span class='message'></span><span class='lead'>" + options.typeLead + "</span>");
            
            $(".input").focus();
        },
        type: function(character, userInput) {
            if (userInput && !console.ready) {
                return false;
            }
            
            $console.find("p").last().find(".message").append(character);
        },
        finish: function() {
            this.newLine();
            this.ready = true;
        },
        write: function(sentences) {
            var sentenceIndex = 0;
            var letterIndex = 0;
            var typingSpeed = options.typingSpeed;
            var blinker;
            
           ...