JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<div ng-app ng-controller="AppCtrl" >
    <ul>
        <li ng-repeat="person in persons">
            <div class="person">{{person.name}}</div>
            <ul>
                <li class="actions" ng-repeat= "action in person.actions">
                    {{action}}
                </li>
            </ul>
             <ul>
                <li class="feelings" ng-repeat= "feeling in person.feelings">
                    {{feeling}}
                </li>
            </ul>
       </li>
    </ul>
</div>

CSS

li {
    color:black;
}

.person{
    border-bottom:1px solid gray;
    border-top:3px solid gray;
    color:blue;
}

.actions {
    color:red;
    margin-left: 1em;
    border-bottom:1px solid #eee;
}

.feelings {
    color:green;
    margin-left: 1em;
    border-bottom:1px solid #eee;
}

JavaScript

function AppCtrl($scope) {
    $scope.persons = [
        {
        name: "Freddy",
        actions: ["attack", "eat", "annoy"],
        feelings: ["happiness", "joy", "anger"]},
    {
        name: "Adam",
        actions: ["lounge", "sleep", "destroy"],
        feelings: ["moodiness", "sadness", "fear"]}
    ];
}