JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<label class="button styl-material js-ripple-btn" for="slider_1">
<span>Home</span>
  <svg class="ripple-obj" id="js-ripple" style="fill: #77818B;">
    <use class="js-ripple" height="100" width="100" xlink:href="#ripply-scott">
    </use>
  </svg>
</label>
<label class="button styl-material js-ripple-btn" for="slider_2">
<span>Catalogue</span>
  <svg class="ripple-obj" id="js-ripple" style="fill: #77818B;">
    <use class="js-ripple" height="100" width="100" xlink:href="#ripply-scott">
    </use>
  </svg>
</label>

<!-- Firefox Button Fix -->
<div aria-hidden="true" style="height: 0; width: 0; position: absolute; visibility: hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
      <radialgradient id="gradient">
        <stop offset="0" stop-color="#77818B"></stop>
        <stop offset="0.25" stop-color="#77818B"></stop>
        <stop offset="0.35" stop-color="#77818B"></stop>
        <stop offset="0.5" stop-color="#77818B"></stop>
        <stop offset="0.6" stop-color="#77818B"></stop>
        <stop offset="0.85" stop-color="#77818B"></stop>
        <stop offset="1" stop-color="#77818B"></stop>
      </radialgradient>
    </defs> <symbol id="ripply-scott" viewbox="0 0 100 100">
      <circle cx="1" cy="1" fill="#77818B" id="ripple-shape" r="1"></circle>
    </symbol>  
  </svg>
</div> 
<!-- / FF button fix -->

CSS

label {
  border-radius: 0;
  display: block;
  background: #fff;
  margin: 5px 0;
  cursor: pointer;
  color: #333;
  width: 200px;
  padding: 0;
  font-size: 15px;
  border: 1px solid #333;
  text-align: center;
  height: 70px;
  line-height: 70px;
  overflow: hidden;
}

 

.button {
  padding: 1.5em 3em;
  margin: 0;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

 

.button.styl-material {
  transition: 200ms background cubic-bezier(0.4, 0, 0.2, 1);
}

.button.styl-material:hover,
.button.styl-material:focus {
  outline: none; 
	position: relative;
}

.ripple-obj,
.ripple-obj2 {
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  fill: #fff;
}

.ripple-obj use,
.ripple-obj2 use {
  opacity: 0; 
}


label:hover span {
    position: relative;
    text-decoration: none !important;
		color: #fff;
		z-index: 999999;
  }

JavaScript

var ripplyScott = (function() {
  var circle = document.getElementById('js-ripple');
  var ripple = document.querySelectorAll('.js-ripple');

  function rippleAnimation(event, timing, index) {
    var tl = new TimelineMax();
    var x = event.offsetX;
    var y = event.offsetY;
    var w = event.target.offsetWidth;
    var h = event.target.offsetHeight;
    var offsetX = Math.abs((w / 2) - x);
    var offsetY = Math.abs((h / 2) - y);
    var deltaX = (w / 2) + offsetX;
    var deltaY = (h / 2) + offsetY;
    var scale_ratio = Math.sqrt(Math.pow(deltaX, 2.1) + Math.pow(deltaY, 2.1));

    tl.fromTo(ripple[index], timing, {
      x: x,
      y: y,
      transformOrigin: '50% 50%',
      scale: 0,
      opacity: 1,
      ease: Linear.easeIn
    }, {
      scale: scale_ratio,
      opacity: 1
    });

    return tl;
  }

  return {
    init: function(target, timing) {
      var buttons = document.getElementsByClassName(target);
      var numButtons = buttons.length;
      for (var i = 0; i < numButtons; i += 1) {
      	(function(index) {
        	buttons[index].addEventListener('mouseenter', function(event) {
            rippleAnimation.call(this, event, timing, index);
          });
        }(i));
      }
    }
  };
})();

ripplyScott.init('js-ripple-btn', 0.75);

var ripplyScott = (function() {
  var circle = document.getElementById('js-ripple');
  var ripple = document.querySelectorAll('.js-ripple');

  function rippleAnimation(event, timing, index) {
    var tl = new TimelineMax();
    var x = event.offsetX;
    var y = event.offsetY;
    var w = event.target.offsetWidth;
    var h = event.target.offsetHeight;
    var offsetX = Math.abs((w / 2) - x);
    var offsetY = Math.abs((h / 2) - y);
    var deltaX = (w / 2) + offsetX;
    var deltaY = (h / 2) + offsetY;
    var scale_ratio = Math.sqrt(Math.pow(deltaX, 2.1) + Math.pow(deltaY, 2.1));

    tl.fromTo(ripple[index], timing, {
      x: x,
      y: y,
      transformOrigin: '50% 50%',
      scale: scale_ratio,
...