<h1 class="text-3xl font-bold text-slate-900 mt-4 mb-4">Welcome to Markdown Converter</h1>

<p class="text-slate-700 leading-relaxed mb-3">This is a <strong class="font-semibold text-slate-900">live preview</strong> of your <em class="italic">Markdown</em> content.</p>

<h2 class="text-2xl font-bold text-slate-900 mt-6 mb-3">Features</h2>

<li class="ml-6 list-disc text-slate-700 mb-1">Real-time conversion to HTML</li>
<li class="ml-6 list-disc text-slate-700 mb-1">Styled output ready to copy</li>
<li class="ml-6 list-disc text-slate-700 mb-1">Supports all common Markdown syntax</li>

<h3 class="text-xl font-bold text-slate-800 mt-6 mb-3">Code Example</h3>

<pre class="bg-slate-900 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm"><code>function greet(name) {
<p class="text-slate-700 leading-relaxed mb-3">return <code class="bg-slate-100 text-rose-600 rounded px-1.5 py-0.5 text-sm font-mono">Hello, ${name}!</code>;</p>
<p class="text-slate-700 leading-relaxed mb-3">}</code></pre></p>

<h3 class="text-xl font-bold text-slate-800 mt-6 mb-3">Links and Emphasis</h3>

<p class="text-slate-700 leading-relaxed mb-3">Visit <a href="https://zion.app" class="text-blue-600 hover:underline" target="_blank" rel="noopener noreferrer">Zion AI Platform</a> for more tools.</p>

<blockquote class="border-l-4 border-blue-400 pl-4 py-1 my-3 text-slate-600 italic bg-blue-50 rounded-r">This is a blockquote — great for callouts and notes.</blockquote>

<hr class="my-6 border-t border-slate-200" />

<li class="ml-6 list-decimal text-slate-700 mb-1">First ordered item</li>
<li class="ml-6 list-decimal text-slate-700 mb-1">Second ordered item</li>
<li class="ml-6 list-decimal text-slate-700 mb-1">Third ordered item</li>