Playground
HTML/JS
기본 웹 기술로 빠르게 프로토타이핑
CSS
Tailwind
index.html
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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Playground</title> <style> body { font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 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 0.5rem; } p { color: #6b7280; margin: 0; } </style> </head> <body> <div class="card"> <h1>Hello, Playground!</h1> <p>Start editing to see your changes.</p> </div> </body> </html>
Preview
css
Console
HTML/JS
index.html
UTF-8
Ln 1, Col 1
Spaces: 2