JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
<style type="text/css">
a.flip-position{
 position:absolute;
 top:120px; left:110px;
}

p.flip-position2{
 position:absolute;
 top:137px; left:24px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue";
}

p.flip-position3{
 position:absolute;
 top:155px; left:44px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

p.flip-position4{
 position:absolute;
 top:179px; left:57px;
 font-family:   serif;
}

</style>
        
</head>
<script>
 var YMPParams =
          {
              displaystate:3
          }
</script>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js">
</script> 

<body>
<div style="background-image: url(http://tinyurl.com/8jxrszy); height: 133px; width: 220px;">
<div>

 <embed height="100" width="100" src="horse.mp3">
  <a class= "flip-position" href="http://soundcloud.com/vishnu-rao-2/martin-luther-king-jr-1/download.mp3"><img src="http://img7.flixcart.com/www/prod/images/favicon-b994e296.ico"></a>

<p class="flip-position2"> flip the button for the message</p>
<p class="flip-position3">from martin luther king jr.</p>
<p class="flip-position4">date: october-2, 2012</p>

</body>
</div>
    </html>