Playground
Vue
Vue.js 컴포넌트 빌드
CSS
Tailwind
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template> <div class="container"> <div class="card"> <h1>Vue Playground</h1> <p>Count: {{ count }}</p> <button @click="count++">Increment</button> </div> </div> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script> <style scoped> .container { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .card { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); text-align: center; } h1 { color: #1f2937; margin: 0 0 1rem; } p { color: #6b7280; margin-bottom: 1rem; } button { background: #10b981; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; } </style>
Preview
css
Console
Vue
App.vue
UTF-8
Ln 1, Col 1
Spaces: 2