JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="MyApp" ng-controller="ExampleController as example">
  <div  ng-repeat="item in example.items" class="someClass" ng-switch="item.type">
     <!-- load a different template (partial) depending on the value of item.type -->
      <div ng-switch-when="type1">type1</div>
      <div ng-switch-when="type2">type2</div>
      <div ng-switch-when="type3">type3</div>
      <div ng-switch-when="type4">type4</div>
  </div>
</body>

CSS

.someClass{
  float: left;
  width: 100px;
  height: 100px;
  background-color: black;
  border: 2px solid white;
  color: white;
}

JavaScript

angular.module('MyApp',[]);
angular.module('MyApp').controller('ExampleController', [ExampleController]);
function ExampleController() {
    var ctrl = this;
    
    ctrl.items = [
    		{"type": "type1"},
        {"type": "type2"},
        {"type": "type3"},
        {"type": "type4"}
		];
}