JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background:black;">
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 1</div></div>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 2</div></div>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 3</div></div>
</body>

CSS

.circleBase {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);
}

.type1 {
     padding:20px;
    background: white;
    border:1px solid black;
    color:black;

}

JavaScript

$( ".type1" ).click(function() {
  $( this ).toggle( "explode", {pieces: 50 }, 2000);

});
$(document).ready(function() {
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src',                              'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
        //audioElement.load()
        $.get();
        audioElement.addEventListener("load", function() {
        audioElement.play();
        }, true);
        
        var audioElement2 = document.createElement('audio');
        audioElement2.setAttribute('src', 'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
        //audioElement.load()
        $.get();
        audioElement2.addEventListener("load", function() {
        audioElement2.play();
        }, true);

	var x = 0;
	if(x == 0) {
        	$('.type1').click(function() {
        	audioElement.play();
        	});
        	x = 1;
        }
        if(x == 1) {
        	$('.type1').click(function() {
        	audioElement2.play();
        	});
        	x = 0;
        }


        $('.pause').click(function() {
        audioElement.pause();
        });



});