JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div style="position:relative; display: inline-block;">


    <div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; background:url(https://i.stack.imgur.com/e6CO5.png); display: block;">
    top left image
    </div>
    
    <div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; right: 0; background:url(https://i.stack.imgur.com/e6CO5.png) top right; display: block;">
    top right image
    </div>
    
     <div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; left: 0; background:url(https://i.stack.imgur.com/e6CO5.png) bottom left; display: block;">
    bottom image left
    </div>
    
    <div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; right: 0; background:url(https://i.stack.imgur.com/e6CO5.png) bottom right; display: block;">
    bottom image right
    </div>
    
<table class="tableBorder" border="1" ng-app="myExample" ng-controller="myCTRL">

<!-- Titles -->
<tr>
<td align=middle><b>Building
<td align=left><b>Level
<td align=middle><b>Armour
<td align=left><b>Destroyed

<!-- Main Body -->
<tr >
    <td align=left width=100>
    Outpost:</td>
    <td><select style="width: 40px" ng-model="OP" ng-options="value.armour as value.label for value in myOptionsOP"></select></td>
    <td align=left width=200>Base Armour: {{OP}}</td>
    <td ng-show= "OP>0" align=middle width=25><input type="checkbox" ng-model="stOP"></td>
    <td ng-hide= "OP>0" width=25>
    
    
<tr >
    <td align=left width=100>Warehouse:</td>
    <td><select style="width: 40px" ng-model="WH1" ng-options="value.armour as value.label for value in myOptionsWH"></select></td>
    <td align=left width=200>Base Armour: {{WH1}}</td>
    <td ng-show= "WH1>0" align=middle width=25><input type="checkbox" ng-model="stWH1"></td>
    <td ng-hide= "WH1>0" width=25>
<tr >
    <td align=left...

CSS

td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 2px 10px;
}

.tableBorder {
    -webkit-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;
       -moz-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;
         -o-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;
            border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch;

    //  border-top-width: 50px;
    //  border-right-width: 20px;
    //  border-bottom-width: 10px;
    //	border-left-width: 20px;    	
      border-width: 50px 20px 10px 20px;
}

.blink_me {
    padding: 2px;
    
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: steps(1, start);
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: steps(1, start);
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: steps(1, start);
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { background-color: none; }
    50% { background-color: red }
    100% { background-color: none; }
}

@-webkit-keyframes blinker {  
    0% { background-color: none; }
    50% { background-color: red }
    100% { background-color: none; }
}

@keyframes blinker {  
    0% { background-color: none; }
    50% { background-color: red }
    100% { background-color: none; }
}

JavaScript

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

function myCTRL($scope) {
    $scope.myOptionsOP = [
    {"armour": 0, "label": "0"},
    {"armour": 1000, "label": "1"},
    {"armour": 2000, "label": "2"},
    {"armour": 4000, "label": "3"},        
    {"armour": 8000, "label": "4"},  
    {"armour": 16000, "label": "5"},    
    {"armour": 32000, "label": "6"},  
    {"armour": 64000, "label": "7"},    
    {"armour": 750000, "label": "8"}];
    
    $scope.myOptionsWH = [
    {"armour": 0, "label": "0"},
		{"armour":100,"label": "1"},
		{"armour":600,"label": "2"},
		{"armour":1100,"label": "3"},
		{"armour":1600,"label": "4"},
		{"armour":2100,"label": "5"},
		{"armour":2600,"label": "6"},
		{"armour":3100,"label": "7"},
		{"armour":3600,"label": "8"},
		{"armour":4100,"label": "9"},
		{"armour":4600,"label": "10"},
		{"armour":5100,"label": "11"},
		{"armour":9277,"label": "12"},
		{"armour":17280,"label": "13"},
		{"armour":415000,"label": "14"}];
    
    $scope.myOptionsLP = [
    {"armour": 0, "label": "0"},
		{"armour":450,"label": "1"},
		{"armour":788,"label": "2"},
		{"armour":1378,"label": "3"},
		{"armour":2412,"label": "4"},
		{"armour":4221,"label": "5"}];
		
    $scope.myOptionsSY = [
    {"armour": 0, "label": "0"},   
		{"armour":2000,"label": "1"},
		{"armour":4000,"label": "2"},
		{"armour":6000,"label": "3"}];

    $scope.myOptionsDK = [
    {"armour": 0, "label": "0"},
		{"armour":550,"label": "1"},
		{"armour":1200,"label": "2"},
		{"armour":1850,"label": "3"},
		{"armour":2500,"label": "4"},
		{"armour":3150,"label": "5"},
		{"armour":3800,"label": "6"},
		{"armour":4450,"label": "7"},
		{"armour":5100,"label": "8"},
		{"armour":5750,"label": "9"},
		{"armour":6400,"label": "10"},
		{"armour":7050,"label": "11"},
		{"armour":9150,"label": "12"}];

    $scope.myOptionsTur = [
    {"armour": 0, "label": "0"},
    {"armour": 400, "label": "1"},
    {"armour": 1200, "label": "2"},
    {"armour": 3600, "label": "3"},
    {"armour": 10800,...