JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shape" class="pulsate oval-green"></div>

<button id="changeClass" >Toggle Pulsate</button>

CSS

.oval-green {
    position:absolute;
    top:50px;
	width: 80px;
	height: 30px;
    left: 40px;
	background-color: rgb(95,226,90);
	-moz-border-radius: 100px / 36px;
	-webkit-border-radius: 100px / 36px;
	border-radius: 100px / 36px;
}

.oval-orange {
    position:relative;
	width: 80px;
	height: 30px;
    left: 4px;
	background-color: rgb(223,146,0);
	-moz-border-radius: 100px / 36px;
	-webkit-border-radius: 100px / 36px;
	border-radius: 100px / 36px;
}
.oval-red {
    position:relative;
	width: 80px;
	height: 30px;
    left: 4px;
	background-color: rgb(163,26,25);
	-moz-border-radius: 100px / 36px;
	-webkit-border-radius: 100px / 36px;
	border-radius: 100px / 36px;
}

JavaScript

$(document).ready( function() {

start();
function start() {
	var width = 80;
    var height = 30;
    var intensity = 1.1;
    var pulwidth = width * intensity;
    var pulheight = height * intensity;
    var left = (pulwidth - width) / 2;
    $(".pulsate").animate({
        backgroundColor: 'rgb(122,199,51)',
        width: '88px',
        height: '33px',
        left: '-=4px',
        top: '-=1.5px'
    }, 1000).animate({
        backgroundColor: 'rgb(95,226,90)',
        width: '80px',
        height: '30px',
        left: '+=4px',
        top: '+=1.5px'
    }, 10, start)
}

    $('#changeClass').on('click', function() {
        $('#shape').toggleClass('pulsate');
        if ($('#shape').hasClass('pulsate')) {
            start();
        } 
    });
    
});