JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

<div class="button-wrapper">
  <img id="playSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/playcircle.svg" alt="play" title="play" class="opa" name="playSound2">
  <img id="stopSound2" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/pausecircle.svg" alt="pause" title="pause" class="opa hide" name="stopSound2">

</div>

CSS

.button-wrapper {
  position: relative;
  height: 50px;
}

.opa {
  position: absolute;
  width: 100%;
  max-width: 20px;
  filter: invert(100%);
  cursor: pointer;
  margin: -0px 1px;
}

.hide {
  display: none;
}

JavaScript

$(function(){
  var widget1 = SC.Widget("so2");

    $("#playSound2").click(function() {
      widget1.play();

  });  
  $("#stopSound2").click(function() {
      widget1.pause();
  });      
});