Error Message Display

<div class="bg-red-50 border border-red-200 rounded-lg p-6 max-w-2xl mx-auto">
  <div class="flex items-start space-x-3">
    <div class="flex-shrink-0">
      <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 19.5c-.77.833.192 2.5 1.732 2.5z"></path>
      </svg>
    </div>
    <div class="flex-1">
      <h3 class="text-lg font-medium text-red-800 mb-2">Invalid Input Format</h3>
      <p class="text-red-700 leading-relaxed">The provided input contains image file paths instead of HTML code. To analyze and extract UI components, please provide actual HTML code with markup, CSS classes, and structure.</p>
      <div class="mt-4 p-3 bg-red-100 rounded border">
        <p class="text-sm text-red-600 font-medium">Expected: HTML markup with tags, attributes, and content</p>
        <p class="text-sm text-red-600">Received: File system paths to PNG images</p>
      </div>
    </div>
  </div>
</div>