JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="238" height="238" viewBox="0 0 238 238">
  <rect x="0" y="0" width="238" height="238" fill="#38761d" />
  <rect x="7" y="7" width="224" height="224" fill="black" />
  <rect x="14" y="14" width="210" height="210" fill="#1155cc" />
  <rect x="21" y="21" width="196" height="196" fill="black" />
  <rect x="28" y="28" width="182" height="182" fill="#38761d" />
  <rect x="35" y="35" width="168" height="168" fill="black" />
  <rect x="42" y="42" width="154" height="154" fill="#1155cc" />
  <rect x="49" y="49" width="140" height="140" fill="black" />
  <rect x="56" y="56" width="126" height="126" fill="#38761d" />
  <rect x="63" y="63" width="112" height="112" fill="black" />
  <rect x="70" y="70" width="98" height="98" fill="#1155cc" />
  <rect x="77" y="77" width="84" height="84" fill="black" />
  <rect x="84" y="84" width="70" height="70" fill="#38761d" />
  <rect x="91" y="91" width="56" height="56" fill="black" />
  <rect x="98" y="98" width="42" height="42" fill="#1155cc" />
  <rect x="105" y="105" width="28" height="28" fill="black" />
  <rect x="112" y="112" width="14" height="14" fill="#38761d" />
</svg>



<button id="playButton2" style="width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick=" 
var player = document.getElementById('player');
player.volume=1.0; 
var button = document.getElementById('playButton2');
if (player.paused) {
    playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
    player.play();
  } else {
    playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
    player.pause();
  }">
 </button>

<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>