JSFiddle - React, Tailwind, and code Playground

by Vivek Athalye

HTML

<div ng-app="myApp" ng-controller="DemoCtrl">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
  <script>
angular.module('myApp', [])
        .controller('DemoCtrl', function ($scope) {
          
          $scope.myOptions = [
            {
              name: 'option #1',
              value: 1
            },
            {
              name: 'option #2',
              value: 2
            }
          ];
          
          //$scope.myValue = $scope.myOptions[0];
          
          $scope.submit = function () {
            console.log($scope.form);
          }
          
        })
.directive('selectBox', function () {
    return {
        replace: true,
        restrict: 'E',
        scope: false,
        template: function (element, attrs) {
            return '<div class="selectBox selector">'+
                   '<select name="' + attrs.name + '" ng-model="' + attrs.ngModel + '" ng-options="' + attrs.optexp + '"' + ((attrs.required) ? ' required' : '') + '></select>'+
                   '</div>';
        },
        link: function (scope, el, attrs) {
            scope.$watch(attrs.ngModel, function () {
                var model = scope.$eval(attrs.ngModel);
                //when value changes, update the selectBox text
                if (angular.isDefined(model) && angular.isDefined(model.name)) {
                    el[0].firstChild.innerText = model.name;
                }
            });
        }
    }
  })
  
.directive('mySelect', ['$compile', function ($compile) {
    return {
        scope: {
            siName: '@',
            siModel: '=',
            siRequired: '@',
            siOptions: '@',
            siData: '='
        },
        transclude: true,
        restrict: 'E',
        replace: true,
        require: '^form',
        template: function (element, attrs) {
          return '<div class="form-group" >'+
'    <div class="secondDiv"> ' +
'  ...