scrimba
Preview
Status Check Interactive
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Status Check Interactive
AboutCommentsNotes
Status Check Interactive
Expand for more info
index.html
run
preview
console
<html>
<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>
Console
"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"
,
"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"
,
/index.html
-8:02