JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

<div ng-app="App" class="container">
    <card></card>
    <div first="E1" second="E1">Heyyyy</div>
    <div first="E2">You</div>
    <div first="E3" second="E3">There</div>
</div>

CSS

.container {
    background: grey;
    width: 500px;
    overflow: hidden;
}

.card-wrapper {
    background: red;
    width: 150px;
    height: 200px;
    float: right;
}

JavaScript

angular
.module('App', [])
.directive('card', function() {
    return {
        replace: true,
        restrict: 'E',
        template: '<div class="card-wrapper"></div>',
        link: function() {
             console.log('Card Link!');   
        }
    };
})
.directive('first', function() {
    return {
        priority: 1,
        link: function(scope, elem, attrs) {
            document.findlemen
            console.log('First! ', attrs.first);
        }
    };
})
.directive('second', function() {
    return {
        priority: 2,
        link: function(scope, elem, attrs) {
            console.log('Second! ', attrs.second);
        }
    }
});