JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<button>Add Element</button>

CSS

div {
    background: #333;
    color: #fff;
}

JavaScript

var textString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum dictum quam a rhoncus. Quisque varius et augue at egestas. Nullam rutrum pellentesque tortor. Suspendisse eget malesuada dolor. Sed non tellus fermentum, porttitor arcu at, elementum tellus. Nullam ut urna pulvinar, tincidunt ligula sed, posuere quam. Nulla euismod mi nec orci bibendum vestibulum. Pellentesque hendrerit ac nunc vel accumsan. Nam ultricies lorem vitae auctor dictum. Donec faucibus ante eu neque molestie aliquet. Praesent semper molestie auctor. Donec in ullamcorper nisl. Pellentesque vel ultrices neque. Etiam quis mi quis tellus sodales pellentesque non non tortor.';
var textArray = textString.split(' ');
var $button = $('button');

$button.on('click', function () {
    
    var words = Math.round(Math.random() * textArray.length);

    var $div = $('<div>', {
        text: textArray.slice(0, words).join(' ')
    });
    
    $div.insertAfter($button);
    
    var width = $div.width();
    var height = $div.height();
    
    $div.css({
        width: 0,
        height: 0,
        opacity: 0
    });
    
    $div.animate({
        width: width,
        height: height,
        opacity: 1
    }, {
        duration: 'slow',
        easing: 'linear'
    });
    
});