JSFiddle - React, Tailwind, and code Playground

by fincher64

HTML

<div ng-app="myApp">
    <p>Correct Margins:</p>
    <div class="list-container" ng-controller="ListController">
        <ul>
            <li ng-repeat="i in items">{{i.label}}</li>
        </ul>
    </div>
    <p>Incorrect Margins:</p>
    <div class="list-container push-down" ng-controller="ListController">
        <ul>
            <li>Home</li>
            <li ng-repeat="i in items">{{i.label}}</li>
            <li>Blog</li>
        </ul>
    </div>
</div>

CSS

.list-container {
    width: 100%;
    background-color: #ff9900;
}
.list-container ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
.list-container ul li {
    padding: 5px;
    margin-right: 1px;
    background-color: #f2f2f2;
    color: #000;
    display: inline-block;
}
.push-down {
    margin-top: 10px;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller("ListController", function ($scope) {
    $scope.items = [{
        id: 1,
        label: "News"
    }, {
        id: 2,
        label: "Services"
    }, {
        id: 3,
        label: "Products"
    }];
});