JSFiddle - React, Tailwind, and code Playground

HTML

<div data-ng-app='demo' ng-controller="MainCtrl">
		  <button ng-click="add()">Add More Patrick</button>
		  <ul>
			<li ng-repeat="item in items" ng-animate="'highlight'">
			  <a>{{item.name}}</a>
			</li>
		  </ul>
		</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
    <script data-require="[email protected]" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
    <script data-require="[email protected]" data-semver="1.9.2" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>


<style>
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{ 
	border: none;
	margin: 0; 
	outline: none;	
	padding: 0;
}

html{
    height:100%;		
}

body{	
	height:100%;	

	font: 14px helvetica, arial, sans-serif;	
}	
	
ul{
	list-style-type: none;
}

.clear{
	clear: both;
}	

input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }

textarea{
	resize: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
	
.hide{
	display: none;
}	

	
		
/******************************************************************************************************************************* 2.	fonts */	


/****************************************************************************************************************************** 3.	layout */	
a {
	font-size: 300%;
}

JavaScript

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

app.controller('MainCtrl', function($scope){
	$scope.items = [{
		name: 'Squidward'
	}, 
	{
		name: 'Plankton'
	}];

	$scope.add = function(){
		$scope.items.push({
			name: 'Patrick'
		});
	};
});

app.animation('highlight-enter', function() {
        return {
          setup: function(element) {
            element.css({
              'background-color': '#fff'
            });
          },
          start: function(element, done) {
            element.animate({
              'background-color': '#f08'
            }, 1000, function() {
              done();
            });
          }
        };
      }).animation('highlight-enter', function() {
        return {
          setup: function(element) {
            element.css({
              'position': 'relative',
              'left': '0'
            });
          },
          start: function(element, done) {
            element.animate({
              'position': 'relative',
              'left': '100px'
            }, 1000, function() {
              done();
            });
          }
        };
      });