JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<body ng-app="">
    <p style='text-align:center'> <a href='http://www.whatibroke.com/?p=836'>www.whatibroke.com</a>

    </p>
    <div ng-controller='PeopleController'>
        <div>
            <input type='text' ng-model='name' placeholder='Name' />
            <button ng-click='addPerson()'>Add</button>
        </div>
        <div ng-repeat="person in people" class='person' ng-click='removePerson($index)' ng-animate="'person'">{{person.name}}</div>
    </div>
</body>

CSS

.person {
    padding: 20px;
    width: 50px;
    height: 50px;
    background-color: #E8FCE4;
    border: 1px solid #C0E2BB;
    float: left;
    margin: 5px;
    text-align: center;
    box-shadow: 2px 2px 2px #DAD3D3;
    text-shadow: 0px -1px 1px #FFF;
    cursor: pointer;
}
/*
				Note: you can condense these, however they've been split to make the explanation a little easier to follow;
			*/

/* This is the class that will be animated *FROM* when a new person is added */
 .person-enter {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
    opacity: 0;
}
/* This is the class that will be animated *TO* when a new person is added */
 .person-enter.person-enter-active {
    opacity: 1;
}
/* This is the class that will be animated *FROM* when a person is removed */
 .person-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
    opacity: 1;
}
/* This is the class that will be animated *TO* when a person is removed */
 .person-leave.person-leave-active {
    opacity: 0;
}

JavaScript

function PeopleController($scope) {
    $scope.name = "";
    $scope.people = [{
        name: "Santa Clause"
    }, {
        name: "Easter Bunny"
    }, {
        name: "Tooth Fairy"
    }, {
        name: "Chris Owens"
    }, {
        name: "Phillip Farnsworth"
    }, {
        name: "Clark Kent"
    }, {
        name: "Lana Lang"
    }];

    $scope.removePerson = function (row) {
        $scope.people.splice(row, 1);
    }

    $scope.addPerson = function () {
        $scope.people.push({
            name: $scope.name
        });
        $scope.name = "";
    }
}