Playground
React
JSX로 React 컴포넌트 작성
CSS
Tailwind
App.jsx
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
function App() { const [count, setCount] = React.useState(0); return ( <div style={{ fontFamily: 'system-ui, sans-serif', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', background: 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)' }}> <div style={{ background: 'white', padding: '2rem', borderRadius: '1rem', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)', textAlign: 'center' }}> <h1 style={{ color: '#1f2937', margin: '0 0 1rem' }}> React Playground </h1> <p style={{ color: '#6b7280', marginBottom: '1rem' }}> Count: {count} </p> <button onClick={() => setCount(c => c + 1)} style={{ background: '#06b6d4', color: 'white', border: 'none', padding: '0.5rem 1rem', borderRadius: '0.5rem', cursor: 'pointer' }} > Increment </button> </div> </div> ); }
Preview
css
Console
React
App.jsx
UTF-8
Ln 1, Col 1
Spaces: 2