JSFiddle - React, Tailwind, and code Playground

by cirqueit

HTML

<link rel="stylesheet" href="//designmodo.github.io/Flat-UI/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="//designmodo.github.io/Flat-UI/css/flat-ui.css">
<!DOCTYPE html>
  <body ng-app="flatuiApp">
    <div ng-controller="FlatUICtrl" class="container">
      <div class="row">
        <div class="col-md-2">
        <flatui-checkbox ng-repeat="item in checkbox1.options" model="item.selected" label="item.name" value="item.id" name="valcontainer0"></flatui-checkbox>
        </div>
        <div class="col-md-2">
          <flatui-checkbox ng-repeat="item in checkbox1.options" model="item.selected" label="item.name" value="item.id" name="valcontainer0" disabled=""></flatui-checkbox>
        </div>
        <div class="col-md-2">
          <flatui-radio ng-repeat="item in radio1.options" model="radio1.selected" label="item.name" value="item.id" name="valcontainer1"></flatui-radio>
        </div>
        <div class="col-md-2">
          <flatui-radio ng-repeat="item in radio1.options" model="radio1.selected" label="item.name" value="item.id" name="valcontainer1" disabled=""></flatui-radio>
        </div>
        <div class="col-md-2">
          <flatui-switch model="switch1"></flatui-switch>
        </div>
        <div class="col-md-2">
          <flatui-switch model="switch1" square="" disabled=""></flatui-switch>
        </div>
      </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery-1.8.3.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/jquery.ui.touch-punch.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/bootstrap.min.js"></script>
    <script src="//designmodo.github.io/Flat-UI/js/bootstrap-select.js"></script>
    <!-- These three are replaced -->
    <!-- <script...

JavaScript

angular.module('flatuiApp', ['flatuiApp.controllers', 'flatuiApp.directives']);
  angular.module('flatuiApp.controllers', []);
  angular.module('flatuiApp.directives', []);

angular.module('flatuiApp.controllers')
    .controller('FlatUICtrl', [
      '$scope', function($scope) {
        $scope.checkbox1 = {};
        $scope.checkbox1.options = [
          {
            "name": "check1",
            "id": 1,
            "selected": true
          }, {
            "name": "check2",
            "id": 2,
            "selected": false
          }
        ];
        $scope.radio1 = {};
        $scope.radio1.options = [
          {
            "name": "radio1",
            "id": 1
          }, {
            "name": "radio2",
            "id": 2
          }, {
            "name": "radio3",
            "id": 3
          }
        ];
        $scope.radio1.selected = $scope.radio1.options[0].id;
        $scope.switch1 = false;
      }
    ]);


  angular.module('flatuiApp.directives')
    .directive("flatuiRadio", function() {
      return {
        restrict: "AE",
        template: '<label ng-class="{\'checked\': model == value, \'disabled\': disabled}" class="radio">{{label}}<span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" ng-model="model" ng-disabled="disabled" ng-value="value" ng-required="required" name="name"/></label>',
        replace: true,
        scope: {
            model: "=",
            label: "=",
            value: "=",
            required: "=",
            name: "=",
            disabled: '@'
        },
        compile: function(element, attrs) {
            if (attrs.disabled === void 0) {
                attrs.disabled = false;
            } else {
                attrs.disabled = true;
            }
        }
        };
    })
  .directive("flatuiCheckbox", function() {
    return {
      restrict: "AE",
      template: '<label ng-class="{\'checked\':...