JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="ripple-container">
      <div class="ripple"></div>
  </div>
</div>

SCSS

.container {
  width: 700px;
  height: 128px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
  
  .ripple-container {
    width: 100%;
    height: 100%;
    background-color: #F5B30C;
    position: relative;
    overflow: hidden;
  }
  
  .ripple {
    position: absolute;
    background-color: #3f3fd8;
    top: 0;
    right: 0;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    transition: transform 1s;
    
    &.rippler-active {
      transition: transform 0.5s;
      transform: scale(500);
    }
  }
}

JavaScript

var el = document.querySelector('.container');
var ripple = document.querySelector('.ripple');
var animating = false;

el.addEventListener('click', function () {
console.log('ss')
	if (ripple.className.indexOf('rippler-active') > -1) {
 		ripple.className = 'ripple'; 
  } else {
		ripple.className += ' rippler-active';
  }
 
});