JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Getting Started With Angular.js<span>Data-Binding with the ng-model Directive <i>(Part III) -->

<script>
    leftController = function(){};
    rightController = function(){};
</script>

<body ng-app>
  <header>
    <img src="http://sub1.kevinchisholm.com/blog/images/angularjs-logo-small.png" class="logo" >
    <hgroup>
      <h1>Getting Started With Angular.js<span>Data-Binding with the ng-model Directive <i>(Part III)</i><span></h1>
      <h2>Working Example</h2>
      <h3><a href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h3>
    </hgroup>
  </header>
  <div id="main">
    <div class="grandParent">
        <hgroup>
          <h2>Grand Parent</h2>
          <h3>Type Something In the Text-Box</h3>
        </hgroup>
        <input type="text" ng-model="myData.grandParent" maxlength="20"/>
          <p class="content grandParent"><b>The Value of "myData.grandParent" is:</b><span class="val">{{myData.grandParent}}</span></p>
          <div class="parent">
              <hgroup>
                <h2>Parent</h2>
                <h3>Type Something In the Text-Box</h3>
              </hgroup>
              <input type="text" ng-model="myData.parent" maxlength="20"/>
              <p class="content grandParent"><b>The Value of "myData.grandParent" is:</b><span class="val">{{myData.grandParent}}</span></p>
              <p class="content parent"><b>The Value of "myData.parent" is:</b><span class="val">{{myData.parent}}</span></p>
            <div class="child left" ng-controller="leftController">
              <h2>Left Child</h2>
              <h3>Type Something In the Text-Box</h3>
              <input type="text" ng-model="myData.left" maxlength="20"/>
              <p class="content grandParent"><b>The Value of "myData.grandParent" is:</b><span class="val">{{myData.grandParent}}</span></p>
              <p class="content parent"><b>The Value of "myData.parent" is:</b><span class="val">{{myData.parent}}</span></p>
              <p...

CSS

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  }

h1,h2{
  margin:20px 0;
}
hgroup h1{
  color:#b82934;
  font-size:42px;
}
hgroup h1 span{
  display:block;
  font-size:22px;
  color:#444;
}
hgroup h3 a{
  font-size:22px;
  color:#ccc;
}
header{
  width:60%;
  margin:10px auto;
}
img.logo{
  display:block;
  float:left;
  margin-top: -20px;
}

#main{
  clear:both;
  margin:20px auto 0;
  width:98%;
}

#main > .grandParent{
  overflow:auto;
  margin-bottom:50px;
  padding:1%;
  background-color:#D8BFD8;
  border:3px solid #444;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

#main > .grandParent > .parent{
  overflow:auto;
  margin-bottom:50px;
  padding:1%;
  background-color:#ccc;
  border:3px solid #444;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.child{
  position:relative;
  float:left;
  width:40%;
  margin-right: 0;
  padding:10px;
  border:3px solid #444;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;  
}

input{
  width:90%;
  padding:5px;
  font-size:22px;
}

.left{
  margin-left: 5%;
  margin-right: 5%;
  background-color:#B0E0E6;
}

.right{
  background-color:#F0E68C;
}

select{
  margin:20px 0;
}

.content{
  font-size:22px;
  color:#e52a3a;
}

.content b{
  font-weight:bold;
}
.content.grandParent{
  color:#800080;
}
.content.parent{
  color:#006400;
}
.val{
  margin-left:10px;
  background-color:#e52a3a;
  font-family:Georgia,Times,Serif;
  color:#fff;
  font-weight:bold;
  font-size:22px;
}
.content.grandParent .val{
  background-color:#800080;
}

.content.parent .val{
  background-color:#006400;
}