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, <u>or</u> select a value from the drop-down box</h2>
<select ng-model="myData"/>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Super-Size</option>
</select>
<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;
}
select{
margin:20px 0;
}
.content b{
font-weight:bold;
}
.val{
margin-left:10px;
background-color:#e52a3a;
font-family:Georgia,Times,Serif;
color:#fff;
font-weight:bold;
}