JSFiddle - React, Tailwind, and code Playground

HTML

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" alt="">
</div>

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton2');
    var player = document.getElementById('player2');
      document.querySelector('#playButton2 .initial').style.display='none';
      document.querySelector('#playButton2 .pause').style.display='none';
      document.querySelector('#playButton2 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
    playButton2.style.backgroundColor = 'transparent';
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
    playButton2.style.backgroundColor = 'transparent';    
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .play').style.display='inline-block';
   ...