playground/app.html at main · ken-py-dev/playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script> <!-- STYLING -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <!-- LOGIC -->
</head>
<body class="p-8 bg-gray-900">
    <div id="app" class="max-w-md mx-auto">
        <!-- 🎨 TAILWIND-->
        <!-- ⚡ VUE -->
        <button @click="count++"
                class="px-6 py-3 text-white font-bold rounded-lg shadow-lg"
                :class="count > 5 ? 'bg-green-500' : 'bg-blue-500'">
            Clicks: {{ count }}
        </button>
    </div>

    <script>
        const app = Vue.createApp({
            data() { return { count: 0 } }
        }).mount('#app')
    </script>
</body>
</html>