Card

<article class="max-w-xl rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <span class="inline-flex items-center gap-1 rounded-full border border-red-600/30 bg-[#feeae9] px-2.5 py-1 text-xs font-semibold text-red-600">
    <i class="fa-solid fa-bolt"></i> Live Challenge
  </span>
  <h3 class="mt-3 text-lg font-semibold tracking-tight text-slate-900">BLT Security Hackathon</h3>
  <p class="mt-1 text-sm text-slate-600">Find, report, and validate real issues. Earn points with clean reports and reproductions.</p>
  <div class="mt-3 flex flex-wrap gap-3 text-sm text-slate-600">
    <span><i class="fa-regular fa-calendar"></i> Mar 20 - Apr 5</span>
    <span><i class="fa-solid fa-users"></i> Open to all contributors</span>
  </div>
  <div class="mt-4 flex gap-2.5">
    <button class="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white hover:bg-[#c10000]">Join Now</button>
    <button class="rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">View Rules</button>
  </div>
</article>