JSFiddle - React, Tailwind, and code Playground

by prometh

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="bbApp">
  <bb-input
    label="Text"
    model="asdf"
    type="text"
   ></bb-input>
</div>

JavaScript

(function() {
  'use strict';
  
  var template = 
`<label
  class="bb type-{{type}} input2"
  ng-class="{
    checked: checked,
    disabled: disabled,
    empty: empty,
    focused: focused,
    invalid: invalid,
    valid: valid
  }"
>
  
  <span
    class="bb compactly horizontally padded , unwrapped , stretched grid row"
    ng-if="type==='checkbox' || type==='radio'"
  >
    <span class="bb solid grid cell">
      <input
        class="-field"
        name="{{name}}"
        ng-model="model"
        type="{{type}}"
      >
    </span>
    <span class="bb fluid grid cell"><span class="-label">{{label}}</span></span>
  </span>

  <span class="bb block container" ng-if="type!=='checkbox' && type!=='radio'">
    <span class="-label">{{label}}</span>

    <span class="bb block container" ng-if="type!=='select' && type!=='textarea'">
      <input
        class="-field"
        name="{{name}}"
        ng-model="model"
        type="{{type}}"
      >
    </span>

    <span class="bb block container" ng-if="type === 'select'">
      <select
        class="-field"
        name="{{name}}"
        ng-model="model"
        ng-options="{{options}}"
      >
        <option value="" disabled></option>
      </select>
    </span>

    <span class="bb block container" ng-if="type === 'textarea'">
      <textarea
        class="-field"
        name="{{name}}"
        ng-model="model"
      ></textarea>
    </span>
  </span>

</label>`;

  angular
    .module('bbApp', [])
    .controller('InputController', ['$scope', InputController])
    .directive('bbInput', ['$compile', '$timeout', bbInput]);

  function bbInput($compile, $timeout) {
    return {
      //bindToController: true,
      controller: 'InputController',
      link: link,
      restrict: 'E',
      scope: {
        label: '@',
        model: '@',
        name: '@',
        options: '@',
        type: '@'
      },
      template: template
    };

    function link(scope, element, attrs, ctrl) {

      //...