QA Dashboard Card

<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');</style>
  <div class="font-inter">
    <div class="mb-6">
      <h3 class="text-lg font-semibold text-gray-900 mb-2">QA Dashboard</h3>
      <p class="text-sm text-gray-600">Sample implementations using the design system.</p>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
      <div class="bg-green-50 p-4 rounded-lg border border-green-100">
        <div class="flex items-center justify-between mb-2">
          <span class="text-sm font-medium text-green-800">Passed</span>
          <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">+2.3%</span>
        </div>
        <div class="text-2xl font-bold text-green-900">1,248</div>
      </div>
      <div class="bg-red-50 p-4 rounded-lg border border-red-100">
        <div class="text-sm font-medium text-red-800 mb-2">Failures</div>
        <div class="text-2xl font-bold text-red-900">28</div>
      </div>
      <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
        <div class="text-sm font-medium text-yellow-800 mb-2">Pending</div>
        <div class="text-2xl font-bold text-yellow-900">34</div>
      </div>
      <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
        <div class="text-sm font-medium text-blue-800 mb-2">Coverage</div>
        <div class="text-2xl font-bold text-blue-900">96%</div>
      </div>
    </div>
    <div class="text-right mb-4">
      <span class="text-xs text-gray-500">Last 30 days</span>
    </div>
    <div class="flex flex-wrap gap-2 text-xs text-gray-600 mb-4">
      <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full">Failed tests</span>
      <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">In progress</span>
      <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Unit + integration</span>
    </div>
  </div>
</div>