JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="dazzle-wrap" data-dazzle>
     <h2 class="title gold-text">Example Title</h2>

    <p>Praesent congue erat at massa. Morbi mattis ullamcorper velit. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Nullam sagittis. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.</p>
    <p>Aenean massa. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nunc nonummy metus. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce ac felis sit amet ligula pharetra condimentum.</p>
    <p>Nulla sit amet est. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Nulla consequat massa quis enim. Ut tincidunt tincidunt erat. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
</div>
<div class="dazzle-wrap" data-dazzle data-reverse>
     <h2 class="title gold-text">Proin pretium leo ac ut neque</h2>

    <p>Aenean massa. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nunc nonummy metus. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Fusce ac felis sit amet ligula pharetra condimentum.</p>
    <p>Nulla sit amet est. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Nulla consequat massa quis enim. Ut tincidunt tincidunt erat. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
</div>
<div class="dazzle-wrap" style="width: 96%;" data-dazzle>
     <h2 class="title gold-text">Etiam sit amet orci eget</h2>

    <p>Nullam cursus lacinia erat. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Fusce neque. Nunc nonummy metus. Quisque rutrum.</p>
    <p>Nunc nonummy metus. Phasellus dolor. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis...

CSS

@import url(https://fonts.googleapis.com/css?family=Oswald:400, 300, 700);
 body {
    background-color: #13132b;
    color: #fff;
    padding: 0;
    margin: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family:'Oswald', sans-serif;
    font-weight: 300;
    font-size: 16px;
}
* {
    box-sizing: border-box;
}
p {
    margin: 0 0 15px 0;
}
p:last-of-type {
    margin-bottom: 0;
}
.dazzle-wrap {
    width: 46%;
    margin: 2%;
    float: left;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}
[data-dazzle] {
    position: relative;
    padding: 30px;
}
[data-dazzle] span.d-bulb {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 1;
    transform: scale(1);
    animation-name: d-dim;
    animation-iteration-count: infinite;
    animation-duration: 5000ms;
    animation-timing-function: linear;
    transform-origin: center center;
    box-shadow: -1px -1px 12px rgba(255, 91, 200, 1), 1px 1px 10px rgba(255, 187, 0, 1);
}
@keyframes d-dim {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    15% {
        opacity: 0.3;
        transform: scale(0.3);
    }
    20% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.gold-text {
    background: -webkit-linear-gradient(45deg, rgba(246, 203, 79, 1) 0%, rgba(255, 245, 217, 1) 25%, rgba(246, 203, 79, 1) 50%, rgba(255, 245, 217, 1) 75%, rgba(246, 203, 79, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f8c754;
    text-shadow: none;
}
.title {
    font-size: 36px;
    display: block;
    margin: 0 0 15px;
    line-height: 1.25;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
}

JavaScript

/**
 * DOM based lightbulb box
 */
 
var dazzle = {
    bulbSize: 15,
    minBuffer: 5,
    animationDelay: 50,
    animationObj: {},
    init: function () {
        this.elems = document.querySelectorAll('[data-dazzle]');
        this.bindEvents();
    },
    bindEvents: function () {
        setTimeout(function () {
            dazzle.renderAll();
        }, 100);
        var t = null;
        window.addEventListener('resize', function () {
            if (!t) {
                t = window.setTimeout(function () {
                    t = null;
                    dazzle.renderAll();
                }, 100);
            }
        });
    },
    renderAll: function () {
        for (var i = 0; i < dazzle.elems.length; i++) {
            dazzle.clearBorder(dazzle.elems[i], i);
        }
    },
    renderBorder: function (elem, n) {
        var d = {
            x: elem.offsetWidth,
            y: elem.offsetHeight
        };
        var d = dazzle.calcBorderFill(d),
            c = 0,
            m = (d.x.count * 2) + (d.y.count * 2) - 4;
        var aStep = dazzle.animationDelay,
            aDur = dazzle.animationDelay * m;
        // Space
        var dxSpace = dazzle.bulbSize + d.x.buffer;
        var dySpace = dazzle.bulbSize + d.y.buffer;
        if (elem.hasAttribute('data-reverse')) {
            // REVERSE DIRECTION
            // Top row
            for (var i = 1; i < d.x.count; i++) {
                var b = document.createElement('span');
                b.setAttribute('class', 'd-bulb');
                b.setAttribute('style', 'top: 0px; right: ' + (dxSpace * i) + 'px; animation-delay: ' + (c * aStep) + 'ms; animation-duration: ' + aDur + 'ms;');
                elem.appendChild(b);
                c++;
            }
            // Left col
            for (var i = 1; i < d.y.count; i++) {
                var b = document.createElement('span');
                b.setAttribute('class', 'd-bulb');
                b.setAttribute('style', 'top: ' +...