Live Stream Highlight Video Card

<section class="border-gradient sm:p-5 bg-[#050713] max-w-xl rounded-[28px] pt-4 pr-4 pb-4 pl-4">
  <div class="flex flex-col gap-4">
    <div class="rounded-2xl overflow-hidden relative border border-slate-800/80">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Stream highlight" class="w-full h-40 sm:h-44 object-cover">
      <div class="absolute bottom-3 left-3 px-2.5 py-1 rounded-full bg-black/60 border border-white/10">
        <p class="text-[11px] font-medium text-slate-100 tracking-tight flex items-center gap-1.5">
          <span class="h-2 w-2 rounded-full bg-red-500 animate-pulse"></span>
          Live Highlight
        </p>
      </div>
    </div>

    <div class="flex justify-between items-start gap-3 pb-3 border-b border-slate-800/70">
      <div class="space-y-1">
        <h2 class="text-[18px] sm:text-[20px] font-semibold tracking-tight text-slate-50">
          Eclipse Clash: Final Round
        </h2>
        <p class="text-[13px] text-slate-400">
          Squad Nova vs Shadow Line • Season 4
        </p>
        <p class="text-[12px] text-slate-500">
          1.8M views • Streamed 3 hours ago
        </p>
      </div>
      <button class="flex bg-slate-900/80 w-8 h-8 rounded-full items-center justify-center" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:menu-dots-bold-duotone" class="iconify text-[18px] text-slate-400 iconify--solar"><path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" class=""></path><path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5" class=""></path></svg>
              </button>
    </div>

    <div class="flex items-center justify-between pt-1">
      <div class="flex items-center gap-3">
        <div class="h-8 w-8 rounded-full overflow-hidden bg-slate-800">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/9ba14e9d-067e-4e6f-be51-1c554751d2ca_320w.webp" class="w-full h-full object-cover" alt="" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))">
        </div>
        <div class="">
          <p class="text-[13px] font-semibold tracking-tight text-slate-50">Orion Blaze</p>
          <p class="text-[11px] text-slate-500">Streaming in: Eclipse Arena</p>
        </div>
      </div>
      <button class="inline-flex items-center gap-2 rounded-full bg-yellow-400 px-3 py-1.5 text-[12px] font-semibold text-slate-950">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:play-bold-duotone" class="iconify text-[14px] iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M23 12c0-1.035-.53-2.07-1.591-2.647L8.597 2.385C6.534 1.264 4 2.724 4 5.033V12z" clip-rule="evenodd" class=""></path><path fill="currentColor" d="m8.597 21.615l12.812-6.968A2.99 2.99 0 0 0 23 12H4v6.967c0 2.31 2.534 3.769 4.597 2.648" opacity=".5" class=""></path></svg>
                Watch Now
              </button>
    </div>
  </div>
</section>