JSFiddle - React, Tailwind, and code Playground

by Ray Mak

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- AngularJS dynamic configuration pop-up. -->
<div class="panel panel-default" ng-app="app" ng-controller="appCtrl">
  <div class="panel-heading">configuration:</div>
  <div class="panel-body">
    <div class="row">
      <div class="col-lg-12">
        <div class="jumbotron sortable" id="dropright" style="min-height: 300px;">
          <div class="item-configuration alert alert-info" ng-repeat="item in data.nodes" role="alert">{{item.title}} <a class="pull-right" href="#"><span class="glyphicon glyphicon-edit"></span></a></div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

ul,
li {
  list-style-type: none;
}


/*
    Release Dashboard
*/

.dashboard-header {
  margin-top: 31px;
}

.release-action-btn {
  border-color: #fff;
}

.status-color-red {
  background-color: #d9534f;
  color: white;
}

.status-color-success {
  background-color: #5cb85c;
  color: white;
}

.status-color-new {
  background-color: #999999;
  color: white;
}

.status-color-inprogress {
  background-color: #337ab7;
  color: white;
}

.panel-default > .panel-heading,
.table-header,
.navbar-inverse {
  background-color: #164c9c !important;
  color: white;
}

JavaScript

var app = angular.module('app', []);
app.controller('appCtrl', function($scope, $rootScope,$compile) {
  $scope.title = "Test";

  $scope.data = {
    "title": "Workflow",
    "nodes": [{
      "id": 1,
      "title": "Task 1",
      "isParallel": false,
      "isSequential": true
    }, {
      "id": 2,
      "title": "Task 2",
      "isParallel": true,
      "isSequential": false
    }]
  };
});
app.directive('itemConfiguration', function($compile) {
  return {
    scope: true,
    restrict: 'AC',
    link: function($scope, element, attrs) {
      element.click(function() {
      console.log($scope);
      $scope.itemC = $scope.item;
        var modal = ' \
        	<div id="item-configuration-modal" class="modal fade" tabindex="-1" role="dialog"> \
            <div class="modal-dialog" role="document"> \
              <div class="modal-content"> \
                <div class="modal-header"> \
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> \
                  <h4 class="modal-title"><input type="text" ng-model="'+ $scope.itemC.title +'" /></h4> \
                </div> \
                <div class="modal-body"> \
                  <div class="radio"> \
                    <label> \
                      <input type="radio" name="optionsRadios" id="optionsRadios1" ng-model="' + $scope.itemC.isParallel + '" value="' + $scope.itemC.isParallel + '" checked> Parallel \
                    </label> \
                  </div> \
                  <div class="radio"> \
                    <label> \
                      <input type="radio" name="optionsRadios" id="optionsRadios2" ng-model="' + $scope.itemC.isSequential + '" value="' + $scope.itemC.isSequential + '"> Sequential \
                    </label> \
                  </div> \
                </div> \
                <div class="modal-footer"> \
                  <button type="button" class="btn btn-default"...