Code Preview With Header

<div class="ws-code-preview overflow-hidden rounded-lg border border-[var(--ws-code-preview-border)] shadow-sm">
  <!-- Header bar -->
  <div class="flex items-center justify-between border-b border-[var(--ws-code-preview-border)] bg-[var(--ws-code-preview-header-bg)] px-4 py-2.5">
    <div class="flex items-center gap-2">
      <svg class="h-4 w-4 text-[var(--ws-code-preview-text)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/>
      </svg>
      <span class="text-sm font-medium text-[var(--ws-code-preview-text)]">index.html</span>
    </div>
    <div class="flex items-center gap-1 text-xs text-[var(--ws-code-preview-text)]">
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"/>
      </svg>
      <span>Copy</span>
    </div>
  </div>
  <!-- Code body -->
  <pre class="overflow-x-auto bg-[var(--ws-code-preview-bg)] p-4 font-mono text-sm leading-relaxed text-[var(--ws-code-preview-text)]"><code>&lt;section class="py-16"&gt;
  &lt;div class="mx-auto max-w-4xl px-6"&gt;
    &lt;h2 class="text-3xl font-bold"&gt;Hello World&lt;/h2&gt;
    &lt;p class="mt-4 text-lg text-slate-600"&gt;
      A simple HTML section with Tailwind styling.
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/section&gt;</code></pre>
</div>