Tailwind CSS 4 Button With Ripple Effect

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Button With Ripple Effect</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.2.1"></script>
  <style>
    .ripple {
      position: absolute;
      background: rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      transform: scale(0);
      animation: ripple 0.6s linear;
      pointer-events: none;
    }
    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
  </style>
</head>
<body class="bg-gray-50 flex items-center justify-center min-h-screen">

<button 
    onclick="createRipple(event)"
    class="relative overflow-hidden px-14 py-6 bg-indigo-600 text-white rounded-[2rem] font-black text-sm uppercase tracking-widest shadow-2xl shadow-indigo-100 hover:bg-slate-900 transition-colors cursor-pointer active:scale-95"
  >
    <span>Ripple Effect</span>
  </button>

circle.style.width = circle.style.height = `${diameter}px`;
      circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
      circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
      circle.classList.add("ripple");

const ripple = button.getElementsByClassName("ripple")[0];
      if (ripple) { ripple.remove(); }
      button.appendChild(circle);
    }
  </script>

</body>
</html>