JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul id="customerFeedback">
  <li>찾고 싶은 상품이 없어요.</li>
  <li>필터를 사용하는 방법을 모르겠어요.</li>
  <li>사진이나 설명이 부정확해요.</li>
  <li>검색어와 관련 없는 상품이 있어요.</li>
</ul>

CSS

ul {
  width: 280px;
  margin-top: -4px;
}
ul li {
  position: relative;
  display: block;
  height: 40px;
  margin-top: 4px;
  padding-left: 15px;
  list-style: none;
  font-size: 14px;
  color: #555;
  line-height: 40px;
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 2px;
  background-color: #fff;
  cursor: pointer;
  overflow: hidden;
}
ul li:hover {
  border-color: #346aff;
}
span.ripple-effect {
  position: absolute;
  display: block;
  border-radius: 100%;
  background-color: rgba(238, 238, 238, 0.6);
  opacity: 0;
}

JavaScript

'use strict';

$.extend($.easing, { easeOutQuart: function (x, t, b, c, d) { return -c * ((t = t / d - 1) * t * t * t - 1) + b; } });

$.fn.rippleEffect = function(options) {
  var $this = $(this),
    options = $.extend({}, options),
    rippleWidth = Math.max($this.outerWidth(), $this.outerHeight()),
    rippleElClass = 'ripple-effect';

  $this.prepend(
    $('<span>')
      .addClass(rippleElClass)
  );

  $this.on('click', function(event) {
    var $this = $(this),
      $rippleEl = $this.children('span.' + rippleElClass),
      offset = $this.offset(),
      css = {
        width: 0,
        height: 0,
        left: event.pageX - offset.left,
        top: event.pageY - offset.top,
        opacity: 1
      };

    $rippleEl
      .stop()
      .css(css)
      .animate({
        width: rippleWidth * 2,
        height: rippleWidth * 2,
        left: css.left - rippleWidth,
        top: css.top - rippleWidth,
        opacity: 0
      }, 800, 'easeOutQuart', function() {
        options.doneTrigger &&
          $this.trigger('doneRippleAnimation');
      });

    event.stopPropagation();
  });

  $this.on('doneRippleAnimation', function() {
    console.log('Done');
  });

  return $this;
};

$('#customerFeedback > li').rippleEffect({ doneTrigger: true });