JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src="https://www.wearegoingsolo.com/wp-content/themes/replay/js/plangular.js"></script>
<link rel="stylesheet" href="https://www.wearegoingsolo.com/wp-content/themes/replay/css/bassdock.css">


<body ng-app="app">

<div plangular="http://soundcloud.com/estate/tendency" 
  class="flex flex-center">
  <button ng-click="playPause()"
    title="Play/Pause"
    class="flex-none h4 mr2 button button-transparent button-grow rounded">
    <svg ng-if="player.playing !== track.src" class="icon geomicon" data-icon="play" viewBox="0 0 32 32" width="32" height="32" style="fill:currentcolor"><path d="M4 4 L28 16 L4 28 z "></path></svg>
    <svg ng-if="player.playing === track.src" class="icon geomicon" data-icon="pause" viewBox="0 0 32 32" width="32" height="32" style="fill:currentcolor"><path d="M4 4 H12 V28 H4 z M20 4 H28 V28 H20 z "></path></svg>
  </button>
  <div class="flex-auto">
    <progress
      class="progress red"
      ng-click="seek($event)"
      ng-value="currentTime / duration || 0">
      {{ currentTime / duration }}
    </progress>
  </div>
</div>

JavaScript

var app = angular.module('app', ['plangular'])
   .config(function(plangularConfigProvider){
   plangularConfigProvider.clientId = '5dcb5ea7cb935713b230330006d1765e';
});