JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<script src="https://www.googledrive.com/host/0B0erCtky7eLKTE94OWZONGY1UFk/preview.swf"></script>

  <div class="buttonchat">
    <span class="buttonadd">
    <div class='play'></div>
    </span>


<div class="pop">
<object id="Object1" type="application/x-shockwave-flash" data="https://www.googledrive.com/host/0B0erCtky7eLKTE94OWZONGY1UFk/player_mp3_classic.swf" width="100%" height="20"> 
<noscript><a href ="http://www.java.com">Install or enable JAVA</a></noscript> 
<param name="movie" value="mp3=https://cs9-7v4.vk.me/p8/4d71bec16f1bf0.mp3" /> 
<param name="autoplay" value="false" /> 
<param name="FlashVars" value="mp3=https://cs9-7v4.vk.me/p8/4d71bec16f1bf0.mp3&amp;
width=100%&amp;height=20&amp;autoplay=0&amp;autoload=0&amp;loop=0&amp;volume=100&amp;showstop=1&amp;showinfo=0&amp;showvolume=0&amp;showslider=1&amp;loadingcolor=dddddd&amp;bgcolor1=7e8282&amp;bgcolor2=5b5e5e&amp;bgcolor=7e8282&amp;buttoncolor=ffffff&amp;buttonovercolor=989a9a&amp;slidercolor1=ffffff&amp;slidercolor2=b0aca7&amp;sliderovercolor=989a9a&amp;textcolor=ffffff&amp;" />
</object>
    
</div>
</div>
<div class="player">

CSS

.buttonchat{
  margin:0 auto;
  width:300px;
  cursor:default;
}
.buttonadd {
  display: block;
  height: 25px;
  width:100%;
  transition: all .4s ease-in-out;
}
.buttonadd {
  background: #bada55;
  transition: all .4s ease-in-out;
}
.pop {
  background: #fff;
  display: none;
  font: 1em/normal 'Arial';
  width:100%;
  padding:3px 0;
  border:0px solid #444;
}

.play:before {
  display: block;
  content: "";
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid #888;
  margin: 4px 0 0 5px;
}
.play{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-top: 11px;
  border: 2px solid #888;
}

JavaScript

$(".buttonchat").click(function() {
 
  $(".pop").slideToggle(400);
});