JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <box c="yellow">
      <item>item</item>
    </box>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

JavaScript

angular.module('myApp', [])
.directive('box', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div ng-transclude></div>'
    };
})
.directive('item', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {c:'='},
        template: '<div>c:{{c}}</div>'
    };
});