React + Tailwind Playground

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './styles.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { useState } from 'react'
import { MetricCard } from './components/MetricCard'

export default function App() {
  const [deployed, setDeployed] = useState(false)

  return (
    <main className="min-h-screen bg-slate-950 px-6 py-16 text-slate-100">
      <section className="mx-auto max-w-4xl">
        <span className="rounded-full border border-cyan-400/25 bg-cyan-400/10 px-3 py-1 font-mono text-xs font-bold uppercase tracking-[0.18em] text-cyan-300">
          React 19 + Tailwind CSS 4
        </span>

        <div className="mt-8 grid gap-8 lg:grid-cols-[1.25fr_0.75fr] lg:items-end">
          <div>
            <h1 className="text-5xl font-black tracking-[-0.055em] text-white sm:text-7xl">
              Style components directly in TSX.
            </h1>
            <p className="mt-5 max-w-2xl text-lg leading-8 text-slate-400">
              Edit utility classes, component files, and design tokens with an
              instant React preview.
            </p>
          </div>
          <button
            type="button"
            onClick={() => setDeployed((value) => !value)}
            className="rounded-2xl bg-cyan-400 px-5 py-3 font-bold text-slate-950 shadow-lg shadow-cyan-500/20 transition hover:-translate-y-0.5 hover:bg-cyan-300"
          >
            {deployed ? 'Deployed successfully' : 'Deploy preview'}
          </button>
        </div>

        <div className="mt-12 grid gap-4 sm:grid-cols-3">
          <MetricCard label="Components" value="2" detail="Editable files" />
          <MetricCard label="Runtime" value="19.2" detail="React + TypeScript" />
          <MetricCard label="Styling" value="v4" detail="Tailwind CSS" />
        </div>
      </section>
    </main>
  )
}