JSFiddle - React, Tailwind, and code Playground

by tunechest000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <audio id="audioPlayer" preload="true" controls="true">
    </audio>
    <ul id="playlist">
    <li class="animals"><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3"><div id="background3"><img src="https://images.unsplash.com/photo-1575489560633-6a7609328e67?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ" class="image3"/><h4 id="song">Freedom Reign</h4><h5 class="artist">Abt Goat</h5></div></a></li>

      <button class="reveal">Add to Playlist </button>
      <div class="toggle_container">
        <div class="block">
          <li class="current-song"><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3">
              <div id="background2"><img src="https://images.unsplash.com/photo-1577044685231-70e99274404c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80Cat" class="image" />
                <h4 id="song">Tummy Why</h4>
                <h5 class="artist">Revy Conover</h5>
              </div>
            </a></li>
        </div>
      </div>
    </ul>
    <script>
      audioPlayer();

      function audioPlayer() {
        var currentSong = 0;
        $("#playlist li a").click(function(e) {
          e.preventDefault();
          $("#audioPlayer")[0].src = this;
          $("#audioPlayer")[0].play();
          $("#playlist li").removeClass("current-song");
          currentSong = $(this).parent().index();
          $(this).parent().addClass("current-song");
        });
        $("#audioPlayer")[0].addEventListener("ended", function() {
          currentSong++;
          if (currentSong == $("#playlist li a").length)
            currentSong = 0;
          $("#playlist li").removeClass("current-song");
          $("#playlist li:eq(" + currentSong + ")").addClass("current-song");
          $("#audioPlayer")[0].src = $("#playlist li...

CSS

#searchbar {
  padding: 15px;
  border-radius: 10px;
  width: 80%
}

#playlist .current-song a {
  color: #7777FE;
  border-color: #008ae6;
}

#playlist {
  list-style: none;
}

#playlist li a {
  text-decoration: none;
  color: #ca0ce0;
}


#playlist {
  font-size: 14.5px;
  list-style: none;
  margin-left: 40px;
  color: blue;
}

.animals {
  display: list-item;
  margin-bottom: 5px;

}

#background {
  border: solid;
  width: 100%;
  height: 75px;
  margin-top: 5px;
  margin-left: 5px;
}

#background2 {
  border: solid;
  width: 98%;
  height: 75px;
  margin-top: 5px;
  margin-left: 5px;
}

#background3 {
  border: solid;
  width: 100%;
  height: 75px;
  margin-top: 5px;
  margin-left: 0px;
}


#playlist.current-song {
  border-color: #008ae6;
}

.image {
  width: 100px;
  float: left
}

#song {
  margin-left: 13px;
  margin-top: 9px;
  float: left;
}

.artist {
  text-align: center;
  margin-right: 20px;
  font-size: 12px;
  margin-top: 14px;
}

.image3 {
  width: 100px;
  float: left;
  height: 75px;
}

JavaScript

$(document).ready(function() {
  $(".toggle_container").hide();
  $("button.reveal").click(function() {
    $(this).toggleClass("active").next().slideToggle("fast");

    if ($.trim($(this).text()) === 'Add to Playlist') {
      $(this).text('Remove from playlist');
    } else {
      $("#audioPlayer")[0].pause();
      $("#audioPlayer")[0].currentTime = 0;
      $(this).text('Add to Playlist');
    }

    return false;
  });
  $("a[href='" + window.location.hash + "']").parent(".reveal").click();
});