JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" usemap="#Navigation" width="150px"/>
<map name="Navigation">
  <area id="show" href="javascript:void(0)" shape="rect" coords="48,53,102,96"/>
</map>
<img src="//placehold.it/50x50" id="tadam"/>

CSS

* {
    margin: 0;
    padding: 0;
}
html, body {
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}
img#tadam {
    right: -300px;
    position: absolute;
    display: block;
    transition: 0.5s;
}

JavaScript

document.querySelector("#show").onclick = function()
{
    console.log(document.querySelector("#tadam"));
    var $tadam = document.querySelector("#tadam");
    $tadam.style.right = "332px";
    var audio = new Audio("http://htmlbook.ru/example/audio/music.mp3");
    audio.play();
    setTimeout(function()
               {
                   $tadam.style.right = "-300px";
                   audio.pause();
                   audio.currentTime = 0;
               }, 3000);
}