JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://angular-ui.github.io/ng-grid/css/ng-grid.css">
<div ng-app="myApp" ng-controller="MyCtrl">
    <div class="container">
    <div class="row">
        

    <h1>Hello, world! {{hello}}</h1>
    <input type="text" />
<my-box options='options'></my-box>

    </div><!-- row closed  -->
    <br/><br/><br/><br/>
    <div class="row">
        <div class="form col-md-5 category">


           <!-- Height input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Height</label>
              <div class="col-md-9">
                <input ng-model="heightdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>

            <br/>

           <!-- Width input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">Width</label>
              <div class="col-md-9">
                <input ng-model="widthdef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>

            <br/>

           <!-- BAckground-color input-->
            <div class="form-group">
              <label class="col-md-3 control-label" for="name">BgColor</label>
              <div class="col-md-9">
                <input ng-model="bgcolordef" id="name" name="name" type="text" placeholder="Your name" class="form-control">
              </div>
            </div>
            <br/>
            <button ng-click="setMainBox()" class="btn btn-primary btn-default pull-right" > Set main box </button>
        </div>
  

        <div class="form col-md-5 col-md-offset-1 category">

            <div class="form-group indiv-box">
              <h3>Box 1:</h3>
              <label class="col-md-3 control-label" for="name">URL</label>
              <div...

CSS

#largebox
    {
      background-color: pink
    }
    .smallbox
    {
      margin:20px;
      display:inline-block;
      background-color: gray
    }
    .form-group
    {
      margin-top:25px !important;
    }
    .indiv-box
    {
      margin-top:35px !important;
      border-bottom: 1px solid #ccc;
    }
    .category
    {
      border:2px solid black;
    }
    .form-group
    {
      margin-bottom:50px !important;
    }
    .form-group input
    {
      margin-top:25px !important;
    }
    .border-row {
    border-bottom: 1px solid #ccc;
    }

JavaScript

var app = angular.module('myApp', []);
app.directive('myBox', function(){
   function link(scope, el, attrs) {
  }
  
  return {
      scope:{
          options: '='
      },
    restrict: 'E',
    link: link,
      template: '<div ng-style="{backgroundColor:options.bgcolordef}">Im a banner! + {{options.bgcolordef}}</div> \
          <div ng-style="{height:options.heightdef,width:options.widthdef,backgroundColor:options.bgcolordef}" class="col-md-10 col-md-offset-1" id="largebox">\
            <br/>\
            I am main Box\
          <a href={{options.link1}}><div class="smallbox pull-right col-md-2" id="box1" >{{options.box1label}}</div></a>\
          <a href={{options.link2}}><div class="smallbox pull-right col-md-2" id="box3" >{{options.box3label}}</div></a>\
          <a href={{options.link3}}><div class="smallbox pull-right col-md-2" id="box4" >{{options.box4label}}</div></a></div>'
  };   
});
app.controller('MyCtrl', function($scope, $http) {
    $scope.hello="My dear very good morning";
    $scope.heightdef=100;
    $scope.widthdef=1000;
    $scope.box1label="box1";
    $scope.box2label="box2";
    $scope.box3label="box3";
    $scope.box4label="box4";
    $scope.link1="box1.html";
    $scope.link2="box2.html";
    $scope.link3="box3.html";
    $scope.link4="box4.html";
    $scope.bgcolordef = '#aaa';
        $scopeoptions = {
            heightdef: $scope.heightdef,
            widthdef: $scope.widthdef,
            bgcolordef: $scope.bgcolordef
        };
    
    $scope.setMainBox = function(){
        var options = {
            heightdef: $scope.heightdef,
            widthdef: $scope.widthdef,
            bgcolordef: $scope.bgcolordef
        };
        $scope.options = options;
    };
    });