JSFiddle - React, Tailwind, and code Playground

by ifonecoder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script type="text/ng-template" id="group-template.html">
  <div class="panel-heading">
    <h4 class="panel-title" style="color:#fa39c3">
        <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
          <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
            {{heading}}
          </span>
        </a>
        
      </h4>

  </div>
  <div class="panel-collapse collapse" uib-collapse="!isOpen">
    <div class="panel-body" style="text-align: right" ng-transclude></div>
  </div>
</script>
<div ng-controller="PlansAppController">
  <div class="container">
    <uib-tabset active="activeForm">
      <uib-tab index="0" heading="Drives">
        <div class="container_main" style="margin-top: 20px" ng-if="current.user">
          <h4>
            <label>{{current.user}}</label>
            </h4>
          <uib-accordion close-others="oneAtATime">
            <div ng-repeat="plan in state[current.user].drives">
              <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen">
                <uib-accordion-heading>
                  {{plansdesc(plan)}} <a...

JavaScript

var app = angular.module('plansapp', ['ui.bootstrap', 'ngAnimate', 'ngTouch']);
app.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if(attr && attr.stopEvent)
                element.bind(attr.stopEvent, function (e) {
                    e.stopPropagation();
                });
        }
    };
 });
app.controller('PlansAppController', function PlansAppController($scope, $http) {

  $scope.users = ['Sam', 'Mike', 'Charles', 'Pam', 'Julie'];

  $scope.state = {
    'Sam': {
      'connections': ['Mike', 'Pam', 'Charles'],
      'drives': [],
      'rides': []
    },
    'Mike': {
      'connections': ['Sam', 'Pam', 'Charles'],
      'drives': [],
      'rides': []
    },
    'Julie': {
      'connections': ['Charles', 'Pam', 'Sam'],
      'drives': [],
      'rides': []
    },
    'Pam': {
      'connections': ['Mike', 'Sam', 'Charles'],
      'drives': [],
      'rides': []
    },
    'Charles': {
      'connections': ['Mike', 'Pam', 'Sam'],
      'drives': [],
      'rides': []
    },

  }

  $scope.findconnection = function() {
    current.connections = $scope.connections[current.user];
  };

  $scope.current = {};

  $scope.oneAtATime = true;

  $scope.formdata = {}

  $scope.plansdesc = function(plan) {
    return plan["from"] + "->" + plan["to"];
  };


  $scope.dateOptions = {
    dateDisabled: false,
    formatYear: 'yy',
    maxDate: new Date(2020, 5, 22),
    minDate: new Date(),
    startingDay: 1
  };
  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
  $scope.altInputFormats = ['M!/d!/yyyy'];

  $scope.popup1 = {
    opened: false
  };

  $scope.open1 = function() {
    $scope.popup1.opened = true;
  };

  $scope.add_plan = function() {
    $scope.state[$scope.current.user].drives.push({
      id: generateUUID(),
      from: $scope.formdata.trip_from,
      to: $scope.formdata.trip_to,
      time:...