JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="Ctrl">
    <h1><span class="grey">$scope.text:</span> {{text}}</h1>
    <box spacing="large" box-type="rounded">
        <h2><span class="grey">$scope.text in box directive:</span> {{text}}</h2>
        <input ng-model="text" />
    </box>
    <box spacing="small" box-type="rounded-shadow">
        <h2><span class="grey">$scope.text in different box directive:</span> {{text}}</h2>
        <input ng-model="text" />
    </box>
</div>

CSS

h1, h2 {
    font-family: arial, sans-serif;
    color: #333;
    margin: 0;
}

h1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
h2 {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 10px;
}
.box {
    border: 1px solid #ddd;
}

.box-inner {
    padding: 18px;
}

.box-rounded {
    border-radius: 3px;
}

.box-rounded-shadow {
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.07);
}

.spacing-large {
    margin-bottom: 22px;
}
.spacing-small {
    margin-bottom: 10px;
}

input {
    width: 100%;
}

.grey {
    color: #aaaaaa;
}

JavaScript

var app = angular.module("app", []);

app.controller("Ctrl", ["$scope", function($scope) {
    
    $scope.text = "Starting Text... FOOBAR!";
    
}]);

app.directive("box", function() {
    return {
        restrict: "E",
        transclude: true,
        replace: true,
        scope: {
            spacing: "@",
            boxType: "@"
        },
        template: '<div class="box" ng-class="{\'spacing-{{spacing}}\' : spacing, \'box-{{boxType}}\' : boxType}"> <div class="box-inner" ng-transclude></div></div>'
    }
});