JSFiddle - React, Tailwind, and code Playground

HTML

<body class="event-listing" ng-app="app" ng-controller="PageController">
    <div class="listing-event-wrap">
	    <input type="text" ng-model="user.firstname" />
        <div ng-controller="SettingsController">
            <section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
                <div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" refobj='user' value="firstname"></div>
            </section>
        </div>
	</div>
</body>

CSS

.page-block, .form-row {
    border: 1px solid #ccc;
    padding: 1em;
}

JavaScript

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

// Directives
app.directive('formrow', function() {
	return {
		scope: {
            label: "@label",
            type: "@type",
            value: "@value",
            refobj: "="
		},
		replace: true,
		template: '<div class="form-row">' + 
            '<div class="form-label" data-ng-show="label">{{label}}</div>' + 
            '<div class="form-entry" ng-switch on="type">' + 
        '<input type="text" ng-model="refobj[value]" data-ng-switch-when="textInput" />' + 
			'</div>' + 
		'</div>'
	}
});
app.directive('block', function() {
	return {
		scope: {
            title: "@title",
            description: "@description"	
		},
		transclude: true,
		replace: true,
		template: '<div class="page-block">' +
			'<h2 data-ng-show="title">{{title}}</h2>' + 
			'<p class="form-description" data-ng-show="description">{{description}}</p>' + 
	        '<div class="block-inside" data-ng-transclude></div>' + 
		'</div>'
	}
});

// Controllers
app.controller("PageController", function($scope) {
    $scope.user = {
        firstname: "John"
    };
});
app.controller("SettingsController", function($scope) {
    $scope.data = {
        updateInfo: {
            title: "Update Your Information",
            description: "A description here",
            labels: {
                firstname: "First Name"
            }
        }
    }
});