JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<div class="container-fluid">
  <div id="content">
    <div class="music-player-container" id="mpc-1">
      <div class="card card-inverse" id="card-1">
        <div class="card-header" id="cardHeader-1">
          <div class="top">
            <i id="1fav" class="favtoggle fa not-liked"></i>
            <i id="1pl" class="fa fa-plus-circle"></i>
          </div>
        </div>
        <div id="album-1" class="album">
          <div class="album-art">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
            <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
              <span class="control-play" id="control-play-1" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
            </div>
          </div>
          <div class="vinyl" id="vinyl-1"></div>
        </div>
        <div class="card-footer">
          <span class="text-ellipsis text-left">hey jude</span>
          <small class="text-left text-ellipsis text-xs text-muted">Abbey Road</small>
        </div>
      </div>
    </div>
    <!-2nd one->
    <div class="music-player-container" id="mpc-2">
      <div class="card card-inverse" id="card-2">
        <div class="card-header" id="cardHeader-2">
          <div class="top">
            <i id="2fav" class="favtoggle fa not-liked"></i>
            <i id="2pl" class="fa fa-plus-circle"></i>
          </div>
        </div>
        <div id="album-2" class="album">
          <div class="album-art">
          ...

CSS

/* CSS used here will be applied after bootstrap.css */


/* CSS used here will be applied after bootstrap.css */


/*@import '../../bourbon/_bourbon.scss';*/


/*@import "../../bourbon-bitters/_bitters.scss";*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}


/*@import "compass/css3";*/


/*@import "../../bourbon-bitters/mixins/_base.scss";*/


/*@mixin filter($function: none) {
 //   @warn "This old mixin is deprecated!";

    @include _bourbon-deprecate-for-prefixing("filter");
    // <filter-function> [<filter-function]* | none
    @include prefixer(filter, $function, webkit spec);
}*/

body {
  background-color: #fff;
  color: #515044;
  font-family: 'Raleway', sans-serif;
}

.music-player-container {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  height: 220px;
  position: relative;
  max-width: 130px;
  margin-left: 70px;
  margin-top: 170px;
}

.music-player {
  background-color: #fff;
  height: 120px;
  padding: 40px 200px 40px 40px;
  position: absolute;
  text-align: right;
  width: 125px;
  z-index: 3;
}

.player-content-container {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}

.artist-name {
  font-size: 28px;
  font-weight: normal;
  margin: 0 0 0.75em 0;
}

.album-title {
  font-weight: 200;
  font-size: 24px;
  margin: 0 0 1.75em 0;
}

.song-title {
  font-size: 18px;
  font-weight: 200;
  margin: 0 0 1.5em 0;
}

.album {
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65);
  height: 120px;
  /*margin-left: 250px;
 ...

JavaScript

$(function() {
  $.widget("custom.musicPlayer", {
    options: {
      autoPlay: false,
      singlePlayer: true
    },
    playing: false,
    id: null,
    playButton: null,
    source: null,
    _create: function() {
      this.id = this.element.attr("id");
      console.log("New MPC: ", this.id);
      this.element.addClass("ui-mp");
      this.playButton = this.element.find(".control-play");
      this.source = this.element.find(".control-play").data("src");
      this._on(this.playButton, {
        click: "togglePlay"
      });
      if (this.options.autoPlay) {
        console.log(this.id + ": AutoPlay Enabled.");
        this.play();
      }
      console.log(this);
    },
    togglePlay: function() {
      if (this.playing) {
        this.stop();
      } else {
        this.play()
      }
    },
    play: function() {
      console.log(this.id + ": event, play");
      if (this.options.singlePlayer) {
        // Stop all other players
        $(".ui-mp").not(this.element).musicPlayer("stop");
      }
      this.playing = true;
      $(this.element).addClass("is-playing");
    },
    stop: function() {
      console.log(this.id + ": event, stop");
      this.playing = false;
      $(this.element).removeClass("is-playing");
    }
  });
  $(".music-player-container").musicPlayer();
});