JSFiddle - React, Tailwind, and code Playground

by Vatsal Pande

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<contact-card>
    <h1>Vatsal Pande</h1>
    <description>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </description>
    <!--<address>-->
      <!--<span>-->
        <!--Seattle, Washington-->
      <!--</span>-->
    <!--</address>-->
</contact-card>
<contact-card>
    <h1>Todd Motto</h1>
    <description>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </description>

    <address>
    <span>
     UK
    </span>
    </address>

</contact-card>
<contact-card>
    <h1>Getify</h1>
    <address><span>US</span></address>
</contact-card>
<contact-card>
    <h1>Wes Bos</h1>
    <description>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </description>
    <address><span>Canada</span></address>
</contact-card>

</div>

JavaScript

(function() {
angular
    .module('app',[]);
    function contactCard(){
        return {
            transclude:{
                name:"h1",
                desc:"?description",
                address:"?address"
            },
            template:`
                <div>
                    <span ng-transclude="name"></span>
                    <div ng-transclude="desc">No description</div>
                    <div ng-transclude="address">No Address</div>
                </div>
                `,

        }
    }

    angular.module('app')
        .directive('contactCard', contactCard);
})();