JSFiddle - React, Tailwind, and code Playground

HTML

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

<br> Instructions:

<br> Clear recent history from browser.
<br>
<br> Now click.






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

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path...