JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button-1">Click Me!</div>
<div class="button-2">Click Me!</div>
<div class="button-3">Click Me!</div>
<div class="button-1">Click Me!</div>
<div class="button-2">Click Me!</div><div class="button">Click Me!</div>

CSS

.button-1 {font-size: 10px;}
.button-2 {font-size: 20px;}
.button-3 {font-size: 30px;}

JavaScript

$(document).ready(function() {
    $('.button-1,.button-2,.button-3').each(function() {

        $(this).data('original-size', $(this).css('fontSize'));

        $(this).click(function() {

            $(this).animate({
                fontSize: "40px"
            }, 1000);

            $(this).siblings().each(function() {

                var originalSize = $(this).data('original-size');

                if ($(this).css('fontSize') != originalSize) {

                    $(this).animate({
                        fontSize: originalSize
                    }, 500);
                }
            });

        });
    });
});