JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <div ng-controller="firstCtrl">
        <div effect-color="#fc9696">
            <P>content here</P>
        </div>
    </div>
</div>

JavaScript

var app = angular.module('app', []);
app.directive('effectColor', function () {
    return {
        restrict: 'AE',
        transclude: true,
        // replace:'true',
        scope: {
            color: '@effectColor'
        },
        restrict: 'AE',
        template: '<div style="background-color:{{color}}" ng-transclude></div>'
    };
});


app.controller('firstCtrl', function ($scope) {


});