JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div ng-app="myApp">
    <div ng-controller="thingCtrl"> 
        <thing-something value='{{data.value}}'> </thing-something>
        {{data.value}}
    </div>
</div>

SCSS

//button.scss

.ui-button {
  position: relative;

  box-shadow: 5px;
  border-radius: 7px / 50%;
  padding: 0.7em 1em;
  text-align: center;
  cursor: pointer;

  &:hover {
	text-decoration: none;
  }

  &:active,
  &:focus {
	outline: none;
  }
}

.ui-button--block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('thingCtrl', ['$scope', function ($scope) {
    $scope.data = {
        value: 'somevalue'
    }            
}]);

myApp.directive('thingSomething', function () {
    'use strict';
    return {
        scope: {
            value: '=myValue'
        },
        restrict: 'E',
        template: '<input value="{{myValue}}" type="text" />',
        transclude: false,
        replace: true,
        link: function(scope, element, attribute){
            scope.value
        }
	};
});