JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Raleway:300&quot; rel=&quot;stylesheet&quot;"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script>
var app = angular.module("myShoppingList",[]);
    app.controller("myController",function($scope){
     $scope.Products =["Milk","Bread","Tea"];
     $scope.addItem = function(){
     $scope.errorText ="";
     if(!$scope.addme){return};
     if($scope.Products.indexOf($scope.addme)==-1){
     $scope.Products.push($scope.addme);
     $scope.addme="";
     }
     else{
       $scope.errorText ="This Item is already Exist";
     }
        }
     $scope.removeItem = function(x){
      $scope.errorText = "";
      $scope.Products.splice(x,1);
     }
  
     
    });
  
</script>
<div ng-app="myShoppingList" ng-controller="myController" class="shoppingContainer">
  <header class="shopping-header shopping-bg shopping-padding ">
       <h3>My Shopping List</h3>
   </header>
    <ul class="shopping-ul">
          <li ng-repeat="x in Products" class="shopping-padding">{{x}} 
          <span ng-click="removeItem($index);" class="shopping-right shopping-margin-right pull-right">x</span></li>
    </ul>
    <div class="shopping-heade shopping-bg shopping-padding">
      <div class="row shopping-margin-top">
        <div class="col-sm-10">
          <input placeholder="Add shopping items here" ng-model="addme" class="shopping-input ">
        </div>
        <div class="col-sm-2">
           <button ng-click="addItem()" class="shopping-btn">Add</button>
        </div>
      </div>
      <p class="shopping-padding-left shopping-text-red">{{errorText}}</p>
    </div>
</div>

CSS

body{
  font-family: 'Raleway', sans-serif;
}
.shoppingContainer{
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
  max-width: 400px;
}
.shoping-margin{
  margin:16px;
}
.shopping-header{
  padding: 0.01em 16px;
  
}
.shopping-header:before{
    content: "";
    display: table;
    clear: both;
}
.shopping-header:after{
    content: "";
    display: table;
    clear: both;
}
.shopping-bg{
  color: #000!important;
   background-color: #f1f1f1!important;
}
.shopping-padding{
  padding-top: 16px!important;
   padding-bottom: 16px!important;
}
ul.shopping-ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.shopping-ul li {
    padding: 6px 2px 6px 16px;
    border-bottom: 1px solid #ddd;
}
.shopping-right{
  float:right!important;
}
.shopping-margin-right{
  margin-right:16px!important;
}
.shopping-margin-top{
  margin-top:16px !important;
}
.shopping-text-red{
  color:red;
}
.shopping-padding-left{
  padding-left: 16px!important;
}
.shopping-input{
    width: 75%;
    float: left;
    margin: 0 10px;
    padding: 10px 6px;
}
.shopping-btn{
      width: 15%;
    padding: 9px 3px;
    background: green;
    color:white;
}