JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="canvas">
    <div id="totalCounter" class="total-counter"></div>

    <div id="clap" class="clap-container">
        <i class="clap-icon fa fa-hand-paper-o"></i>
    </div>
    
    <div id="clicker" class="click-counter">
        <span class="counter"></span>
    </div>
    
    <div id="sonar-clap" class="clap-container-sonar"></div>
    
    <div id="particles" class="particles-container">
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
    </div>
    
    <div id="particles-2" class="particles-container">
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
    </div>
    
    <div id="particles-3" class="particles-container">
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
        <div class="triangle">
            <div class="square"></div>
        </div>
    </div>
    
</div>

SCSS

$default-clap-color: #03a87c;
.canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 300px;
    position: relative;
    .total-counter {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: absolute;
        margin-top: -45px;
        color: gray;
        font-family: sans-serif;
        font-size: 16px;
    }
    .total-counter.fader {
        animation: fade-in 1400ms forwards;
    }
    .clap-container {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 60px;
        height: 60px;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 50%;
        z-index: 2;
        background: #fff;
        cursor: pointer;
        .clap-icon {
            font-size: 30px;
            color: $default-clap-color;
            width: 30px;
            height: 30px;
        }
    }
    .clap-container:hover {
        border: 1px solid $default-clap-color;
    }
    .clap-container.scale {
        animation: scaleAndBack 700ms forwards;
    }
    .click-counter {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        position: absolute;
        top: 132px;
        background-color: $default-clap-color;
        border-radius: 50%;
        z-index: 1;
        .counter {
            font-family: sans-serif;
            font-size: 14px;
            color: #fff;
        }
    }
    .click-counter.first-active {
        animation: first-bump-in 1s forwards;
    }
    .click-counter.active {
        animation: bump-in 1s forwards;
    }
    .clap-container-sonar {
        width: 60px;
        height: 60px;
        background: $default-clap-color;
        border-radius: 50%;
        position: absolute;
        opacity: 0;
        z-index: 0;
    }
    .hover-active {
        animation:...

JavaScript

let accCounter = 0;
let totalCount = 127;
const minDeg = 1;
const maxDeg = 72;
const particlesClasses = [
	{
    	class: "pop-top"
    },
    {
    	class: "pop-top-left"
    },
    {
    	class: "pop-top-right"
    },
    {
    	class: "pop-bottom-right"
    },
    {
    	class: "pop-bottom-left"
    },
];

document.getElementById('totalCounter').innerText = totalCount;

document.getElementById('clap').onmouseover = function() {
	let sonarClap = document.getElementById('sonar-clap');
    sonarClap.classList.add('hover-active');
    setTimeout(() => {
    	sonarClap.classList.remove('hover-active');
    }, 2000);
}

document.getElementById('clap').onclick = function() {
	const clap = document.getElementById('clap');
    const clickCounter = document.getElementById("clicker");
	const particles = document.getElementById('particles');
    const particles2 = document.getElementById('particles-2');
    const particles3 = document.getElementById('particles-3');
    clap.classList.add('clicked');
    upClickCounter();
    
    runAnimationCycle(clap, 'scale');
    
    if (!particles.classList.contains('animating')) {
    	animateParticles(particles, 700);
    } else if(!particles2.classList.contains('animating')){
    	animateParticles(particles2, 700);
    } else if(!particles3.classList.contains('animating')) {
    	animateParticles(particles3, 700);
    } 
}

function upClickCounter() {
    const clickCounter = document.getElementById("clicker");
    const totalClickCounter = document.getElementById('totalCounter');

	accCounter ++;
	clickCounter.children[0].innerText = '+' + accCounter;
    totalClickCounter.innerText = totalCount + accCounter;
    
    if (clickCounter.classList.contains('first-active')) {
		runAnimationCycle(clickCounter, 'active');
    } else {
    	runAnimationCycle(clickCounter, 'first-active');
    }
   	runAnimationCycle(totalClickCounter, 'fader');
}

function runAnimationCycle(el, className, duration) {
	if (el &&...