<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="400" height="400" fill="#f3f4f6"/>

  <!-- Browser window -->
  <g transform="translate(50, 40)">
    <rect x="0" y="0" width="300" height="200" rx="8" fill="white" stroke="#1f2937" stroke-width="2"/>

    <!-- Browser header -->
    <rect x="0" y="0" width="300" height="30" rx="8" fill="#e5e7eb"/>
    <rect x="0" y="22" width="300" height="8" fill="#e5e7eb"/>

    <!-- Browser dots -->
    <circle cx="15" cy="15" r="4" fill="#ef4444"/>
    <circle cx="30" cy="15" r="4" fill="#f59e0b"/>
    <circle cx="45" cy="15" r="4" fill="#10b981"/>

    <!-- URL bar -->
    <rect x="70" y="8" width="210" height="14" rx="7" fill="white" stroke="#d1d5db"/>

    <!-- Content preview -->
    <rect x="15" y="50" width="270" height="12" rx="3" fill="#3b82f6" opacity="0.3"/>
    <rect x="15" y="70" width="220" height="8" rx="2" fill="#9ca3af" opacity="0.5"/>
    <rect x="15" y="85" width="250" height="8" rx="2" fill="#9ca3af" opacity="0.5"/>

    <!-- Image placeholder -->
    <rect x="15" y="105" width="270" height="80" rx="6" fill="#dbeafe" stroke="#3b82f6" stroke-width="2"/>
    <path d="M 150 130 L 160 145 L 175 125 L 190 140 L 210 120" stroke="#3b82f6" stroke-width="2" fill="none"/>
  </g>

  <!-- Social media cards -->
  <g transform="translate(30, 260)">
    <!-- Facebook card -->
    <rect x="0" y="0" width="80" height="60" rx="6" fill="white" stroke="#1877f2" stroke-width="2"/>
    <rect x="5" y="5" width="70" height="35" rx="3" fill="#1877f2" opacity="0.2"/>
    <rect x="5" y="45" width="50" height="4" rx="2" fill="#9ca3af" opacity="0.5"/>
    <rect x="5" y="52" width="40" height="3" rx="1" fill="#9ca3af" opacity="0.3"/>
    <text x="40" y="77" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280" font-weight="600">Facebook</text>

    <!-- Twitter card -->
    <rect x="100" y="0" width="80" height="60" rx="6" fill="white" stroke="#1da1f2" stroke-width="2"/>
    <rect x="105" y="5" width="70" height="35" rx="3" fill="#1da1f2" opacity="0.2"/>
    <rect x="105" y="45" width="50" height="4" rx="2" fill="#9ca3af" opacity="0.5"/>
    <rect x="105" y="52" width="40" height="3" rx="1" fill="#9ca3af" opacity="0.3"/>
    <text x="140" y="77" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280" font-weight="600">Twitter</text>

    <!-- LinkedIn card -->
    <rect x="200" y="0" width="80" height="60" rx="6" fill="white" stroke="#0a66c2" stroke-width="2"/>
    <rect x="205" y="5" width="70" height="35" rx="3" fill="#0a66c2" opacity="0.2"/>
    <rect x="205" y="45" width="50" height="4" rx="2" fill="#9ca3af" opacity="0.5"/>
    <rect x="205" y="52" width="40" height="3" rx="1" fill="#9ca3af" opacity="0.3"/>
    <text x="240" y="77" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280" font-weight="600">LinkedIn</text>

    <!-- Pinterest card -->
    <rect x="300" y="0" width="70" height="60" rx="6" fill="white" stroke="#e60023" stroke-width="2"/>
    <rect x="305" y="5" width="60" height="35" rx="3" fill="#e60023" opacity="0.2"/>
    <rect x="305" y="45" width="45" height="4" rx="2" fill="#9ca3af" opacity="0.5"/>
    <rect x="305" y="52" width="35" height="3" rx="1" fill="#9ca3af" opacity="0.3"/>
    <text x="335" y="77" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280" font-weight="600">Pinterest</text>
  </g>

  <!-- SEO/Tag icons -->
  <g transform="translate(80, 355)">
    <!-- Tag icon -->
    <path d="M 10 0 L 30 0 L 40 10 L 30 20 L 10 20 Z" fill="#3b82f6" opacity="0.8"/>
    <circle cx="20" cy="10" r="3" fill="white"/>

    <!-- OG tag -->
    <rect x="50" y="2" width="35" height="16" rx="3" fill="#10b981" opacity="0.8"/>
    <text x="67.5" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="white" font-weight="bold">og:</text>

    <!-- Meta tag -->
    <rect x="95" y="2" width="40" height="16" rx="3" fill="#8b5cf6" opacity="0.8"/>
    <text x="115" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="white" font-weight="bold">meta</text>

    <!-- Schema tag -->
    <rect x="145" y="2" width="40" height="16" rx="3" fill="#f59e0b" opacity="0.8"/>
    <text x="165" y="13" text-anchor="middle" font-family="system-ui" font-size="8" fill="white" font-weight="bold">JSON</text>

    <!-- Twitter tag -->
    <rect x="195" y="2" width="50" height="16" rx="3" fill="#1da1f2" opacity="0.8"/>
    <text x="220" y="13" text-anchor="middle" font-family="system-ui" font-size="8" fill="white" font-weight="bold">twitter:</text>
  </g>

  <!-- Bottom text -->
  <text x="200" y="395" text-anchor="middle" font-family="system-ui" font-size="14" font-weight="600" fill="#1f2937">Meta Tag Generator</text>
</svg>
