JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circles">
      <div class="round circle1"></div>
      <div class="round circle2"></div>
      <div class="round circle3"></div>
</div>

CSS

.circles{}
.round{opacity: 0.4;;width:75px;height:75px;border-radius: 50%; position: relative;}
.circle1{background:#0f4977;top: 35px;left: 200px;z-index: 1;}
.circle2{background:#f41875;top: 0px;left: 250px;z-index: 2;}
.circle3{background:#6b259c;top: -50px;left: 205px;z-index: 3;}

JavaScript

$(".round").click(function() {   //on click of any circle
    $(this).css("z-index", "99");
    $(this).css("opacity", "1");
    $(this).siblings().css("opacity", "0.5");
    $(this).siblings().css("z-index", "5");
});