JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="showcase">
    <reel>
        <asset></asset>
    </reel>
    
    <script type="text/ng-template" id="reel.html">
      <div class="reel" scrollbar="append">
        <div class="inner" scrollable ng-transclude></div>
      </div>
    </script>
    
    <script type="text/ng-template" id="asset.html">
      <div class="asset" ng-transclude></div>
    </script>
</div>

JavaScript

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

app.directive('reel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    templateUrl:'reel.html',
    link: function() { console.log('reel'); }
  };
});

app.directive('scrollable', function() {
  return {
    terminal: true,
    restrict: 'A',
    link: function() { console.log("scrollable"); }
  };
});

app.directive('asset', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    templateUrl: 'asset.html',
    link: function() { console.log('asset'); }
  };
});