Build a split markdown editor with Tailwind CSS. Use a bordered rounded-2xl card with a toolbar holding a document title on the left, a word and character count in the middle, and on the right a two-option segmented control for Split and Preview plus a small "Copy HTML" button. Below, a two-column grid: the left pane is a monospaced textarea on a faint background with no border and a comfortable line height, pre-filled with a short sample document; the right pane is the rendered output on white with sensible typographic spacing. Then add JavaScript implementing a small markdown renderer covering headings up to level three, bold, italic, inline code, links, unordered lists, blockquotes and fenced code blocks, escaping HTML first so pasted markup cannot inject; re-render on input with a short debounce, keep the counts current, switch layout when Preview is selected, and copy the generated HTML.
Build a split markdown editor with Tailwind CSS. Use a bordered rounded-2xl card with a toolbar holding a document title on the left, a word and character count in the middle, and on the right a two-option segmented control for Split and Preview plus a small "Copy HTML" button. Below, a two-column grid: the left pane is a monospaced textarea on a faint background with no border and a comfortable line height, pre-filled with a short sample document; the right pane is the rendered output on white with sensible typographic spacing. Then add JavaScript implementing a small markdown renderer covering headings up to level three, bold, italic, inline code, links, unordered lists, blockquotes and fenced code blocks, escaping HTML first so pasted markup cannot inject; re-render on input with a short debounce, keep the counts current, switch layout when Preview is selected, and copy the generated HTML.
<section class="mx-auto max-w-5xl px-6 py-12">
<div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-neutral-200 px-5 py-3">
<p class="text-sm font-medium text-neutral-900">release-notes.md</p>
<p id="mdCount" class="font-mono text-xs text-neutral-400">0 words · 0 characters</p>
<div class="flex items-center gap-2">
<div class="flex rounded-lg border border-neutral-200 p-0.5">
<button id="mdSplit" class="rounded-md bg-neutral-900 px-3 py-1 text-xs font-medium text-white">Split</button>
<button id="mdOnly" class="rounded-md px-3 py-1 text-xs font-medium text-neutral-600">Preview</button>
</div>
<button id="mdCopy" class="rounded-lg border border-neutral-200 px-3 py-1.5 text-xs font-medium text-neutral-600 transition hover:bg-neutral-50">Copy HTML</button>
</div>
</div>
<div id="mdGrid" class="grid md:grid-cols-2">
<textarea id="mdInput" spellcheck="false"
class="h-[420px] resize-none border-neutral-200 bg-neutral-50 p-6 font-mono text-[13px] leading-relaxed text-neutral-800 outline-none md:border-r"># Release 4.2
Query caching is now **on by default** for every plan, including free.
## What changed
- Dashboards hit a warm cache for identical queries
- Cache keys include the *row-level* access rules
- Manual invalidation via `POST /v1/cache/purge`
> Median dashboard load went from 1.4s to 380ms across the fleet.
### Upgrading
No action needed. To opt out per workspace, see [the docs](https://example.com).</textarea>
<div id="mdPreview" class="h-[420px] overflow-y-auto p-6"></div>
</div>
</div>
</section>
Build a split markdown editor with Tailwind CSS. Use a bordered rounded-2xl card with a toolbar holding a document title on the left, a word and character count in the middle, and on the right a two-option segmented control for Split and Preview plus a small "Copy HTML" button. Below, a two-column grid: the left pane is a monospaced textarea on a faint background with no border and a comfortable line height, pre-filled with a short sample document; the right pane is the rendered output on white with sensible typographic spacing. Then add JavaScript implementing a small markdown renderer covering headings up to level three, bold, italic, inline code, links, unordered lists, blockquotes and fenced code blocks, escaping HTML first so pasted markup cannot inject; re-render on input with a short debounce, keep the counts current, switch layout when Preview is selected, and copy the generated HTML.