<div class="prose dark:prose-invert max-w-none"><p class="my-2"><h1 class="text-2xl font-bold mt-6 mb-3">Welcome to Markdown Preview</h1></p><p class="my-2">This is a <strong>bold</strong> text and this is <em>italic</em>.</p><p class="my-2"><h2 class="text-xl font-semibold mt-6 mb-2">Features</h2></p><p class="my-2"><li class="ml-4">Easy to use</li>
<li class="ml-4">Real-time preview</li>
<li class="ml-4">Common markdown syntax</li></p><p class="my-2"><h3 class="text-lg font-semibold mt-4 mb-2">Code Example</h3></p><p class="my-2"><pre class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg my-2 overflow-x-auto"><code>const greeting = "Hello, World!";
console.log(greeting);
</code></pre></p><p class="my-2"><blockquote class="border-l-4 border-blue-500 pl-4 my-2 text-gray-600 dark:text-gray-400">This is a blockquote</blockquote></p><p class="my-2"><a href="https://example.com" class="text-blue-500 hover:underline" target="_blank" rel="noopener">Visit Example</a></p><p class="my-2"><table class="border-collapse border border-gray-300 dark:border-gray-600 my-2"><tr><td class="border border-gray-300 dark:border-gray-600 px-2 py-1">Header 1</td><td class="border border-gray-300 dark:border-gray-600 px-2 py-1">Header 2</td></tr></table></p><p class="my-2"><table class="border-collapse border border-gray-300 dark:border-gray-600 my-2"><tr><td class="border border-gray-300 dark:border-gray-600 px-2 py-1">Cell 1</td><td class="border border-gray-300 dark:border-gray-600 px-2 py-1">Cell 2</td></tr></table>
<table class="border-collapse border border-gray-300 dark:border-gray-600 my-2"><tr><td class="border border-gray-300 dark:border-gray-600 px-2 py-1">Cell 3</td><td class="border border-gray-300 dark:border-gray-600 px-2 py-1">Cell 4</td></tr></table>
</p></div>