<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#EFF6FF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#DBEAFE;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="cardGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#F9FAFB;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="editorGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1E3A8A;stop-opacity:0.05" />
      <stop offset="100%" style="stop-color:#1E3A8A;stop-opacity:0.02" />
    </linearGradient>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="800" height="600" fill="url(#bgGrad)"/>

  <!-- Decorative circles -->
  <circle cx="100" cy="100" r="60" fill="#3B82F6" opacity="0.05"/>
  <circle cx="700" cy="500" r="80" fill="#8B5CF6" opacity="0.05"/>
  <circle cx="680" cy="100" r="50" fill="#10B981" opacity="0.05"/>

  <!-- Main container -->
  <rect x="80" y="60" width="640" height="480" rx="12" fill="url(#cardGrad)" filter="url(#shadow)"/>
  <rect x="80" y="60" width="640" height="480" rx="12" stroke="#E5E7EB" stroke-width="2" fill="none"/>

  <!-- Top toolbar -->
  <rect x="80" y="60" width="640" height="50" rx="12" fill="#F9FAFB"/>
  <rect x="80" y="60" width="640" height="50" stroke="#E5E7EB" stroke-width="1" fill="none"/>

  <!-- View mode buttons -->
  <rect x="100" y="75" width="70" height="24" rx="4" fill="#3B82F6"/>
  <text x="135" y="91" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Edit</text>

  <rect x="180" y="75" width="70" height="24" rx="4" fill="#E5E7EB"/>
  <text x="215" y="91" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#6B7280" text-anchor="middle">Preview</text>

  <rect x="260" y="75" width="70" height="24" rx="4" fill="#E5E7EB"/>
  <text x="295" y="91" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#6B7280" text-anchor="middle">HTML</text>

  <!-- Split view indicator -->
  <rect x="620" y="75" width="80" height="24" rx="4" fill="#8B5CF6" opacity="0.2"/>
  <text x="660" y="91" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#8B5CF6" text-anchor="middle">Split View</text>

  <!-- Three-pane layout -->
  <!-- Left pane - Markdown Editor -->
  <rect x="100" y="130" width="190" height="360" rx="6" fill="url(#editorGrad)" stroke="#E5E7EB" stroke-width="1"/>

  <!-- Editor header -->
  <text x="120" y="155" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#374151">Markdown Editor</text>

  <!-- Markdown icon -->
  <text x="110" y="155" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#3B82F6">M↓</text>

  <!-- Sample Markdown code -->
  <text x="120" y="185" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"># Heading</text>
  <text x="120" y="205" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"></text>
  <text x="120" y="225" font-family="Monaco, Consolas, monospace" font-size="10" fill="#0066CC">**Bold**</text>
  <text x="165" y="225" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"> text</text>

  <text x="120" y="245" font-family="Monaco, Consolas, monospace" font-size="10" fill="#0066CC">*Italic*</text>
  <text x="165" y="245" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"> text</text>

  <text x="120" y="265" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"></text>
  <text x="120" y="285" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280">- List item</text>
  <text x="120" y="305" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280">- Another</text>

  <text x="120" y="325" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"></text>
  <text x="120" y="345" font-family="Monaco, Consolas, monospace" font-size="10" fill="#22863A">[Link](url)</text>

  <text x="120" y="365" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280"></text>
  <text x="120" y="385" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280">```js</text>
  <text x="120" y="405" font-family="Monaco, Consolas, monospace" font-size="10" fill="#D73A49">code</text>
  <text x="120" y="425" font-family="Monaco, Consolas, monospace" font-size="10" fill="#6B7280">```</text>

  <!-- Center pane - Live Preview -->
  <rect x="310" y="130" width="190" height="360" rx="6" fill="#FFFFFF" stroke="#E5E7EB" stroke-width="1"/>

  <!-- Preview header -->
  <text x="330" y="155" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#374151">Live Preview</text>

  <!-- Eye icon -->
  <circle cx="315" cy="150" r="4" stroke="#10B981" stroke-width="1.5" fill="none"/>
  <path d="M 311 150 Q 315 148 319 150" stroke="#10B981" stroke-width="1.5" fill="none"/>

  <!-- Rendered preview -->
  <text x="330" y="190" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="700" fill="#111827">Heading</text>

  <rect x="330" y="195" width="150" height="1" fill="#E5E7EB"/>

  <text x="330" y="225" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="700" fill="#374151">Bold</text>
  <text x="360" y="225" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#374151"> text</text>

  <text x="330" y="245" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-style="italic" fill="#374151">Italic</text>
  <text x="365" y="245" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#374151"> text</text>

  <!-- Bullet list -->
  <circle cx="333" cy="282" r="2" fill="#6B7280"/>
  <text x="345" y="285" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#374151">List item</text>

  <circle cx="333" cy="302" r="2" fill="#6B7280"/>
  <text x="345" y="305" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#374151">Another</text>

  <!-- Link -->
  <text x="330" y="345" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#0066CC" text-decoration="underline">Link</text>

  <!-- Code block -->
  <rect x="330" y="360" width="150" height="60" rx="4" fill="#F3F4F6"/>
  <text x="340" y="385" font-family="Monaco, Consolas, monospace" font-size="10" fill="#D73A49">code</text>

  <!-- Right pane - HTML Output -->
  <rect x="520" y="130" width="190" height="360" rx="6" fill="url(#editorGrad)" stroke="#E5E7EB" stroke-width="1"/>

  <!-- HTML header -->
  <text x="540" y="155" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="#374151">HTML Output</text>

  <!-- Code brackets icon -->
  <text x="530" y="155" font-family="Monaco, monospace" font-size="12" fill="#6366F1">&lt;/&gt;</text>

  <!-- Copy button -->
  <rect x="640" y="145" width="50" height="20" rx="3" fill="#10B981"/>
  <text x="665" y="158" font-family="system-ui, -apple-system, sans-serif" font-size="9" font-weight="600" fill="white" text-anchor="middle">Copy</text>

  <!-- HTML code output -->
  <text x="540" y="185" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;h1&gt;</text>
  <text x="575" y="185" font-family="Monaco, Consolas, monospace" font-size="9" fill="#374151">Heading</text>
  <text x="540" y="200" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;/h1&gt;</text>

  <text x="540" y="220" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;p&gt;</text>
  <text x="540" y="235" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">  &lt;strong&gt;</text>
  <text x="600" y="235" font-family="Monaco, Consolas, monospace" font-size="9" fill="#374151">Bold</text>
  <text x="540" y="250" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">  &lt;/strong&gt;</text>

  <text x="540" y="270" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">  &lt;em&gt;</text>
  <text x="580" y="270" font-family="Monaco, Consolas, monospace" font-size="9" fill="#374151">Italic</text>
  <text x="540" y="285" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">  &lt;/em&gt;</text>
  <text x="540" y="300" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;/p&gt;</text>

  <text x="540" y="320" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;ul&gt;</text>
  <text x="540" y="335" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">  &lt;li&gt;</text>
  <text x="580" y="335" font-family="Monaco, Consolas, monospace" font-size="9" fill="#374151">List</text>
  <text x="540" y="350" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;/ul&gt;</text>

  <text x="540" y="370" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;a</text>
  <text x="555" y="370" font-family="Monaco, Consolas, monospace" font-size="9" fill="#0066CC">href</text>
  <text x="580" y="370" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">=</text>
  <text x="587" y="370" font-family="Monaco, Consolas, monospace" font-size="9" fill="#22863A">"url"</text>
  <text x="540" y="385" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&gt;</text>
  <text x="547" y="385" font-family="Monaco, Consolas, monospace" font-size="9" fill="#374151">Link</text>
  <text x="575" y="385" font-family="Monaco, Consolas, monospace" font-size="9" fill="#8B5CF6">&lt;/a&gt;</text>

  <!-- Bottom feature badges -->
  <g transform="translate(120, 555)">
    <rect width="70" height="30" rx="4" fill="#DBEAFE"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#1E40AF" text-anchor="middle">GFM</text>
  </g>

  <g transform="translate(210, 555)">
    <rect width="70" height="30" rx="4" fill="#D1FAE5"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#065F46" text-anchor="middle">Preview</text>
  </g>

  <g transform="translate(300, 555)">
    <rect width="70" height="30" rx="4" fill="#E0E7FF"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#3730A3" text-anchor="middle">Export</text>
  </g>

  <g transform="translate(390, 555)">
    <rect width="70" height="30" rx="4" fill="#FEF3C7"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#92400E" text-anchor="middle">Highlight</text>
  </g>

  <g transform="translate(480, 555)">
    <rect width="70" height="30" rx="4" fill="#FCE7F3"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#831843" text-anchor="middle">Tables</text>
  </g>

  <g transform="translate(570, 555)">
    <rect width="70" height="30" rx="4" fill="#DBEAFE"/>
    <text x="35" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#1E40AF" text-anchor="middle">Upload</text>
  </g>

  <!-- Conversion arrow in center -->
  <g transform="translate(390, 305)">
    <circle cx="10" cy="10" r="18" fill="#3B82F6" opacity="0.1"/>
    <path d="M 4 10 L 16 10 M 13 7 L 16 10 L 13 13" stroke="#3B82F6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  </g>
</svg>
