JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Getting Started With Angular.js: Data-Binding Basics With the ng-model Directive (Part I) -->
<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 I)</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="child left">
      <h2>Type Something In the Text-Box</h2>
      <input type="text" ng-model="myData" />
      <p class="content"><b>The Value of "myData" is:</b><span class="val">{{myData}}</span></p>
    </div>
  </div>
</body>

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:90%;
  margin:10px auto;
}
img.logo{
  display:block;
  float:left;
  margin-top: -20px;
}

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

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

.child h2{
  color:#e52a3a!important;
  font-weight:bold;
}

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

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

.right{
  background-color:#556B2F;
}

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

.content b{
  font-weight:bold;
}

.val{
  margin-left:10px;
  background-color:#e52a3a;

  font-family:Georgia,Times,Serif;
  color:#fff;
  font-weight:bold;
}