JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<div id="body">
  <h1>ITEMS NEEDED</h1>
  <div ng-controller="FrameController as vm">
    <input class="item-input" ng-model="itemInput" ng-keyup="addItem()"  />
    <ul>
        <li ng-repeat="item in itemsNeeded">
          <div class="item">{{ item.text }}<span> X</span></div>
        </li>
    </ul>
  </div>
</div>

CSS

.item-input{
  border: 1px solid teal;
  font-size: 2rem;
}

.item{
  border: 1px solid teal;
  box-sizing: border-box;
  width: 300px;
  padding: 1rem;
}

body {
  background-color: black;
  color: teal;
}

JavaScript

const itemsNeeded = [
		{text: "eggs"},
    {text: "water"},
    {text: "bread"}
]

const itemsPurchased = [

]


angular.module('app', [])
.controller('FrameController', function($scope) {
  var vm = this;

	$scope.itemsNeeded = itemsNeeded;
  
   $scope.addItem = function() {
      if(event.keyCode === 13 && $scope.itemInput){
      console.log($scope.itemInput);
      itemsNeeded.push($scope.itemInput)
      }
  };
});

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});