Playground Presets Examples

document.body.innerHTML = '<h1>Vanilla JavaScript</h1><p>No frameworks, just pure JS!</p>'

<div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-xl p-8 max-w-md">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">Tailwind CSS</h1>
    <p class="text-gray-600">Beautiful styling with utility classes!</p>
    <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Click me</button>
  </div>
</div>

<button class="btn btn-primary mt-4">Click me</button>

import React from 'react'
import { createRoot } from 'react-dom/client'

const App = () => {
  const [count, setCount] = React.useState(0)

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 flex items-center justify-center">
      <div className="bg-white rounded-lg shadow-xl p-8 text-center">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">React + Tailwind</h1>
        <p className="text-gray-600 mb-4">Count: {count}</p>
        <div className="space-x-2">
          <button
            onClick={() => setCount(count + 1)}
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
          >
            Increment
          </button>
          <button
            onClick={() => setCount(count - 1)}
            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
          >
            Decrement
          </button>
        </div>
      </div>
    </div>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)

import React from 'react'
import { createRoot } from 'react-dom/client'

const TodoApp = () => {
  const [todos, setTodos] = React.useState(['Learn React', 'Build awesome apps'])
  const [input, setInput] = React.useState('')

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input.trim()])
      setInput('')
    }
  }

  return (
    <div className="container">
      <h1>Todo App</h1>
      <div className="input-group">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="Add a todo..."
        />
        <button onClick={addTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<TodoApp />)

<h1>No CSS Reset</h1>
<p>This playground preserves default browser styles.</p>
<ul>
  <li>Default margins</li>
  <li>Default padding</li>
  <li>Default box-sizing</li>
</ul>

import React from 'react'
import { createRoot } from 'react-dom/client'

const BootstrapApp = () => {
  const [theme, setTheme] = React.useState('primary')

  const themes = ['primary', 'success', 'danger', 'warning', 'info']

  return (
    <div className="container mt-5">
      <div className={`card border-${theme}`}>
        <div className={`card-header bg-${theme} text-white`}>
          <h2 className="card-title mb-0">React + Bootstrap</h2>
        </div>
        <div className="card-body">
          <p className="card-text">Custom configuration without presets!</p>
          <div className="mb-3">
            <label className="form-label">Choose Theme:</label>
            <select className="form-select" value={theme} onChange={(e) => setTheme(e.target.value)}>
              {themes.map((t) => (
                <option key={t} value={t}>
                  {t.charAt(0).toUpperCase() + t.slice(1)}
                </option>
              ))}
            </select>
          </div>
          <button className={`btn btn-${theme}`}>Bootstrap Button</button>
        </div>
      </div>
    </div>
  )
}

const root = createRoot(document.getElementById('root'))
root.render(<BootstrapApp />)

<div class="min-h-screen bg-gray-100 py-12" x-data="{ count: 0, message: 'Hello Alpine!' }">
  <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-4">Alpine.js + Tailwind</h1>

    <div class="mb-4">
      <input
        x-model="message"
        class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        placeholder="Enter a message..."
      />
    </div>

    <div class="mb-4 p-3 bg-blue-50 rounded-lg">
      <p class="text-blue-800" x-text="message"></p>
    </div>

    <div class="flex items-center justify-between">
      <span class="text-lg font-medium" x-text="`Count: ${count}`"></span>
      <div class="space-x-2">
        <button @click="count--" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600">-</button>
        <button @click="count++" class="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600">+</button>
      </div>
    </div>
  </div>
</div>

<div id="app">
  <header>
    <h1>Custom Configuration</h1>
    <p>No presets, completely custom setup!</p>
  </header>

  <main>
    <div class="feature-grid">
      <div class="feature-card">
        <h3>Custom Fonts</h3>
        <p>Google Fonts loaded</p>
      </div>
      <div class="feature-card">
        <h3>No CSS Reset</h3>
        <p>Browser defaults preserved</p>
      </div>
      <div class="feature-card">
        <h3>Custom Meta</h3>
        <p>SEO tags included</p>
      </div>
    </div>

    <button onclick="showInfo()">Click for Info</button>
  </main>
</div>

import { createRoot } from 'react-dom/client'

const BuilderExample = () => (
  <div className="p-8 bg-blue-100 rounded">
    <h2 className="text-xl font-bold text-blue-800">Clean Preset System</h2>
    <p className="text-blue-700">Simple, powerful, and flexible!</p>
  </div>
)

createRoot(document.getElementById('root')).render(<BuilderExample />)