JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reaction" style="border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 1">

        <div class="" style="position:absolute; border-radius: 50%; background-color: purple; width: 40px; height:40px; z-index: 0;"></div>
        <div class="circle" style="position:absolute; border-radius: 50%; background-color: skyblue; width: 40px; height:40px; z-index: 0"></div>

    </div>

CSS

body {padding: 80px;}

JavaScript

/*$('.reaction').mousedown(function () {
  $(this).find('div').css('left', '70%');
});*/
$('.reaction').mousedown(function () {
  $(this).find('div.circle').css('left', '70%');
});
$('.reaction').mouseup(function () {
  $(this).find('div.circle').css('left', '70%');
});