JSFiddle - React, Tailwind, and code Playground

by biggAye

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body class="hold-transition">
  <div class="wrapper">
    <div class="content-wrapper">
      <button class="btn btn-success add">Add Player</button>
     
    
    <label for="dj-chk">Dj Mode</label>
    <input type="radio" name="mode" checked value="dj">
    <label for="studio-chk">Studio Mode</label>
    <input type="radio" name="mode" value="studio"> 
    
  
      <section class="content">
        <div class="row">
          <div class="reorder-photos-list sortable connectedSortable" style="display:flex">
            <div class="col-md-4 text-center">
              <div class="box box-info widget-user ui-draggable ui-draggable-handle" ctype="staff" cid="0">
                <div class="box-header with-border">
                  <h3 class="box-title">Load Audio File</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button type="button" class="btn btn-box-tool"...

CSS

@media (max-width:767px) {
  .sidebar-open .content-wrapper {
    -webkit-transform: translate(230px, 0);
    -ms-transform: translate(230px, 0);
    -o-transform: translate(230px, 0);
    transform: translate(230px, 0)
  }
}

.content-wrapper {
  min-height: 100%;
  background-color: #ecf0f5;
  z-index: 800
}

.fixed .content-wrapper {
  padding-top: 50px
}

@media (max-width:767px) {
  .fixed .content-wrapper {
    padding-top: 100px
  }
}

.fixed.layout-boxed .wrapper {
  max-width: 100%
}

.fixed .wrapper {
  overflow: hidden
}

.hold-transition .content-wrapper {
  -webkit-transition: none;
  -o-transition: none;
  transition: none
}

@media (min-width:768px) {
  .sidebar-mini.sidebar-collapse .content-wrapper {
    margin-left: 50px !important;
    z-index: 840
  }
}

.sidebar-expanded-on-hover .content-wrapper {
  margin-left: 50px
}

@media (min-width:768px) {
  .control-sidebar-open .content-wrapper {
    margin-right: 230px
  }
}

.content {
  min-height: 250px;
  padding: 15px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.add {
  margin-top: 10px;
  margin-left: 30px;
}

.box {
  position: relative;
  border-radius: 3px;
  background: #ffffff;
  border-top: 3px solid #d2d6de;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box.box-primary {
  border-top-color: #3c8dbc;
}

.box.box-info {
  border-top-color: #00c0ef;
}

.box.box-danger {
  border-top-color: #dd4b39;
}

.box.box-warning {
  border-top-color: #f39c12;
}

.box.box-success {
  border-top-color: #00a65a;
}

.box.box-default {
  border-top-color: #d2d6de;
}

.box.collapsed-box .box-body,
.box.collapsed-box .box-footer {
  display: none;
}

.box .nav-stacked>li {
  border-bottom: 1px solid #f4f4f4;
  margin: 0;
}

.box .nav-stacked>li:last-of-type {
  border-bottom: none;
}

.box.height-control .box-body {
  max-height: 300px;
  overflow: auto;
}

.box .border-right {
  border-right: 1px solid #f4f4f4;
}

.box...

JavaScript

var droppableParent;
var lastClosedBox = [];
var djMode = true;
var studioMode = false;
$(function() {
  var j = jQuery.noConflict(true);

  $.each($('.waveform'), function(i, wave) {
    initWaveForms(wave);
  })

  $('input[type=radio]').on('change', function() {
   alert($('input[name=dj]:checked', '#myForm').val()); 
   this.checked ? djMode = true : djMode = false;
});
  

  sortFields(j);
  setBoxes(j)

  $('.add').on("click", function() {
    var s = $('.sortable');
    var boxAndCol;
    var g = 0;
    var finish = true;

    s.each(function(i, el) {
      boxAndCol = null;
      var p = $(el).find('.col-md-4');
      p.each(function(u, _el) {
        var h = $(_el).find('div').length;
        var f = $(_el).prev().find('.widget-user').attr('cid')
        g = $(el).parent().find('.widget-user').length;

        if (h === 0 && lastClosedBox.length !== 0) {
          g = parseInt(lastClosedBox[0].attr('cid'));
          lastClosedBox.shift();
        }

        var colors = ['box-info', 'box-success', 'box-danger'];

        var audioPlayer = '<div class="audio-player">' +
          '<div class="waveform" src=""></div>' +
          '<p class="audio-time"></p>' +
          '<input class="volume" type="range" min="0" max="1" value="0.5" step="0.1">' +
          '<button class="btn btn-play"><i class="fa fa-play"></i><i class="fa fa-pause hide"></i></button>' +
          '<button class="btn btn-delete"><i class="fa fa-trash"></i><i class="fa fa-refresh hide"></i></button>' +
          '<button class="btn btn-load">Load MP3</button>' +
          '<input type="file" id="input-file-now" class="dropify" data-allowed-file-extensions="mp3"/>' +
          '</div>';

        var box = $('<div></div>');
        box.addClass('box ' + colors[u] + ' widget-user ui-draggable ui-draggable-handle');
        box.attr('ctype', 'staff').attr('cid', g.toString());
        box.html("<div class='box-header with-border'>" +
          "<h3 class='box-title'>Load Audio File</h3>" +
 ...