JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="box"></div>

CSS

p {
    font-size: 13pt;
    font-family: helvetica;
}

#box {
    width: 400px;
    height: 400px;
    border: 3px solid red;
    overflow: hidden;
}

JavaScript

$(function () {

    var box = $('#box');
    var fn = function () {
        var t = $('<p />');
        t.text("I'm nervous, so nervous");
        //t.css({opacity: 0});
        box.prepend(t);
        //t.fadeTo(400, 1);
        t.css({opacity: 0}).hide();
        t.animate({
            height: 'show',
        });
        t.animate({opacity: 1}, 1000);
        console.log(box);
    };
    setInterval(fn, 1000);
    
});