Code Generator with Preview

<section
  class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
  style="
    --ws-code-generator-bg: oklch(0.985 0.002 75);
    --ws-code-generator-text: oklch(0.205 0.015 75);
    --ws-code-generator-text-soft: oklch(0.556 0.01 75);
    --ws-code-generator-border: oklch(0.885 0.008 75);
    --ws-code-generator-accent: oklch(0.588 0.16 250);
    --ws-code-generator-action-bg: oklch(0.588 0.16 250);
    --ws-code-generator-action-text: oklch(0.985 0.002 75);
    background: var(--ws-code-generator-bg);
    color: var(--ws-code-generator-text);
    border-color: var(--ws-code-generator-border);
  "
>
  <!-- Tab bar: Code / Preview -->
  <div
    class="flex border-b"
    style="border-color: var(--ws-code-generator-border)"
    role="tablist"
    aria-label="View mode"
  >
    <button
      role="tab"
      aria-selected="true"
      class="border-b-2 px-6 py-3 text-sm font-medium"
      style="border-color: var(--ws-code-generator-accent); color: var(--ws-code-generator-text)"
    >
      Code
    </button>
    <button
      role="tab"
      aria-selected="false"
      class="border-b-2 border-transparent px-6 py-3 text-sm font-medium"
      style="color: var(--ws-code-generator-text-soft)"
    >
      Preview
    </button>
  </div>

  <!-- Code section -->
  <div class="bg-gray-950"> <!-- ws-ok -->
    <div class="flex items-center gap-2 border-b border-gray-800 px-4 py-2">
      <span class="rounded bg-gray-800 px-3 py-1 text-xs font-medium text-gray-300">Card.tsx</span> <!-- ws-ok -->
    </div>
    <pre class="overflow-x-auto p-6 font-mono text-sm leading-relaxed"><code><span class="text-purple-400">export</span> <span class="text-purple-400">function</span> <span class="text-yellow-300">Card</span><span class="text-gray-300">({ title, description }) {</span>
  <span class="text-purple-400">return</span> <span class="text-gray-300">(</span>
    <span class="text-blue-300">&lt;div</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"rounded-xl border p-6"</span><span class="text-blue-300">&gt;</span>
      <span class="text-blue-300">&lt;h3</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"text-lg font-semibold"</span><span class="text-blue-300">&gt;</span><span class="text-gray-300">{title}</span><span class="text-blue-300">&lt;/h3&gt;</span>
      <span class="text-blue-300">&lt;p</span> <span class="text-green-400">className</span><span class="text-gray-500">=</span><span class="text-green-400">"mt-2 text-gray-600"</span><span class="text-blue-300">&gt;</span><span class="text-gray-300">{description}</span><span class="text-blue-300">&lt;/p&gt;</span>
    <span class="text-blue-300">&lt;/div&gt;</span>
  <span class="text-gray-300">)</span>
<span class="text-gray-300">}</span></code></pre>
  </div>

  <!-- Preview section -->
  <div
    class="border-t p-6"
    style="border-color: var(--ws-code-generator-border)"
  >
    <p class="mb-3 text-xs font-medium uppercase tracking-wider" style="color: var(--ws-code-generator-text-soft)">Preview</p>
    <!-- Mock rendered card -->
    <div
      class="rounded-xl border p-6"
      style="border-color: var(--ws-code-generator-border)"
    >
      <h3 class="text-lg font-semibold" style="color: var(--ws-code-generator-text)">Getting Started</h3>
      <p class="mt-2 text-sm" style="color: var(--ws-code-generator-text-soft)">Learn how to set up your project and start building with our comprehensive guide.</p>
    </div>
  </div>
</section>