JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="jp_container" class="demo-container">            <ul>                 <li><a class="jp-play" href="#">Play</a></li>                 <li><a class="jp-pause" href="#">Pause</a></li>                 <li><a class="jp-stop" href="#">Stop</a></li>             </ul>             <ul>                 <li>volume :</li>                 <li><a class="jp-mute" href="#">Mute</a></li>                 <li><a class="jp-unmute" href="#">Unmute</a></li>                 <li> <a class="jp-volume-bar" href="#">|&lt;----------&gt;|</a></li>                 <li><a class="jp-volume-max" href="#">Max</a></li>             </ul>         </div>

CSS

<style>
<!--

.demo-container {
    border: 1px solid #009BE3;
    padding:0 20px;
    font-family: "Myriad Pro Regular","Trebuchet MS";
background:black;
}

.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
    color: #009BE3;
}

.demo-container ul {
    list-style-type:none;
    padding:0;
    margin:1em 0;
    width:100%;
    overflow:hidden;
}

.demo-container ul span {
    color: #A0A600;
}

.demo-container li {
    float:left;
    margin-right:1em;
}

.demo-container p span.track-name {
    color: #CC0090;
}

-->
</style>