JSFiddle - React, Tailwind, and code Playground

HTML

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

<button id="changeClass" >Change Class</button>

CSS

.oval-green {
    position:relative;
	width: 80px;
	height: 30px;
    left: 4px;
	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 = $('.oval-green').width();
    var height = $('.oval-green').height();
    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: pulwidth,
        height: pulheight,
        left: '-='+left
    }, 1000).animate({
        backgroundColor: 'rgb(95,226,90)',
        width: width,
        height: height,
        left: '+='+left
    }, 10, start)
}
    $('#changeClass').on('click', function() {
        $('#shape').toggleClass('pulsate');
    });
});