JSFiddle - React, Tailwind, and code Playground

by Coding Defined

HTML

<script src="https://julian.com/research/blast/build/jquery.blast.js"></script>
<h1>Hello World!</h1>

<button id="btn">Run BlastJS</button>

CSS

body {
    text-align: center;
}
h1 {
    font-size: 50px;
}
button {
    font-size: 30px;
}

JavaScript

$(function () {

    $('#btn').on('click', function () {
        var characters = $('h1').blast({
            delimiter: 'character'
        });

        characters.each(function (i) {
            if (i % 2 === 0) {
                $(this).css({
                    color: 'red'
                });
            } else {
                $(this).css({
                    color: 'blue'
                });
            }
        });
    });
});