JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<div id="magic">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit! Sed ac diam eu nisl pulvinar placerat sagittis ut risus: morbi sollicitudin, est eget ultrices gravida, magna erat ultrices ipsum, vel euismod ante mi quis dui. Phasellus facilisis pellentesque mi, sit amet tristique odio convallis eu. Aliquam massa quam, euismod nec dignissim eget, vulputate vel lacus. Nam tristique pellentesque rhoncus. Duis et lectus nisi. Fusce sit amet sapien neque, sed blandit neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc nisi nisl, condimentum vel dapibus et, dictum placerat diam. Integer sodales ligula in sapien faucibus a elementum dui placerat. Mauris sed rhoncus sapien. Integer viverra ipsum vel ante egestas eget luctus sapien faucibus. In felis justo, tincidunt sed blandit vel, vestibulum id velit. Fusce vel nisi fringilla dui posuere vestibulum a ut nisl. Integer rutrum sodales iaculis. Quisque sit amet feugiat nunc. Cras vulputate suscipit nunc ac laoreet. Proin vitae lectus ac sapien suscipit semper eget eget tortor. Donec bibendum mi id lectus ultricies imperdiet.
</div>

CSS

#magic {
    font-size: 0.6em;
}

JavaScript

/* Growing text */

newHTML = $('#magic').html().replace(/([A-Za-z.,?!:;])/g, '<span class="test">$1</span>');
$('#magic').html(newHTML);

$('.test').mouseenter(function() {
    $(this).animate({
        'font-size': '2em'
    });
});