<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="bg-blue-300 h-screen w-full flex flex-col justify-center items-center
text-sm relative">
<p class="text-xs mb-8">0-5 = GOOD; 6-8 = WARNING; 9-10 = DANGER</p>
<p>Current Status: ?</p>
<div class="w-32 bg-green-200 text-center py-2">
GOOD
</div>
<div class="w-32 bg-yellow-200 text-center py-2">
WARNING
</div>
<div class="w-32 bg-red-200 text-center py-2">
DANGER
</div>
<div class="text-xl mt-4">
<button class="px-3 border rounded">-</button>
<button class="px-3 border rounded">+</button>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
}
});
</script>
</body>
</html>
<html>