Progress Task Card

<div class="w-full max-w-md">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); .font-inter { font-family: 'Inter', 'Helvetica Neue', sans-serif; }
  </style>
  <article class="bg-slate-50 border rounded-xl pt-6 pr-6 pb-6 pl-6 space-y-6">
    <header class="flex items-start justify-between">
      <div>
        <h4 class="text-sm font-inter font-medium text-gray-900">Quarterly report due</h4>
        <p class="text-xs text-gray-500 mt-0.5 font-inter">Sep 30 · 5 business days left</p>
      </div>
      <button class="text-gray-400 hover:text-gray-600 transition-colors focus:outline-none" aria-label="Open detail">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
          <path d="m9 18 6-6-6-6"></path>
        </svg>
      </button>
    </header>
    <p class="text-sm leading-relaxed font-inter text-gray-700">
      Consolidate revenue data and update growth charts before the executive review. Reach out to finance if any discrepancies appear.
    </p>
    <div class="flex flex-wrap gap-2">
      <span class="bg-gray-100 rounded-full px-3 py-1 text-xs font-inter text-gray-700">Finance</span>
      <span class="bg-gray-100 rounded-full px-3 py-1 text-xs font-inter text-gray-700">Analytics</span>
      <span class="bg-gray-100 rounded-full px-3 py-1 text-xs font-inter text-gray-700">Leadership</span>
      <span class="bg- rounded-full px-3 py-1 text-xs font-inter">Urgent</span>
    </div>
    <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h5 class="text-xs text-gray-600 uppercase tracking-tight mb-2 font-inter font-medium">Progress</h5>
        <div class="w-full bg-gray-200 rounded-full h-3.5 overflow-hidden">
          <div class="bg-emerald-500 h-3.5 rounded-full transition-all" style="width: 65%;"></div>
        </div>
        <p class="text-xs text-gray-500 mt-1 font-inter">65% completed</p>
      </div>
      <div>
        <h5 class="text-xs text-gray-600 uppercase tracking-tight mb-2 font-inter font-medium">Next steps</h5>
        <ul class="list-disc list-inside text-xs text-gray-700 space-y-1 leading-snug">
          <li class="font-inter">Verify data accuracy with finance team</li>
          <li class="font-inter">Prepare presentation slides</li>
          <li class="font-inter">Schedule executive meeting</li>
        </ul>
      </div>
    </section>
  </article>
</div>