Event Workshop Card with Attendee Actions

<section
  class="flex-1 overflow-hidden bg-gradient-to-b from-neutral-900 via-neutral-900 to-neutral-800 border-neutral-800 border rounded-3xl relative shadow-xl mx-auto max-w-md">
  <div class="px-6 pt-6 pb-4 flex items-center justify-between border-b border-neutral-800/70">
    <button class="inline-flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-100 transition rounded-full px-3 py-1 hover:bg-neutral-800/60 border border-transparent hover:border-neutral-700 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
            <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:alt-arrow-left-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M11.596 8.303L8.165 11.63a.5.5 0 0 0 0 .74l6.63 6.43c.414.401 1.205.158 1.205-.37v-5.723z" class=""></path><path fill="currentColor" d="M16 11.293V5.57c0-.528-.791-.771-1.205-.37l-2.482 2.406z" opacity=".5" class=""></path></svg>
            <span class="tracking-tight font-sans">Back</span>
          </button>
    <button class="h-9 w-9 rounded-full flex items-center justify-center border border-neutral-800 text-neutral-400 hover:text-neutral-100 hover:bg-neutral-800 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/70" type="button">
            <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:settings-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".5" class=""></path><path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3" class=""></path></svg>
          </button>
  </div>

  <div class="pr-6 pb-6 pl-6 space-y-6">
    <div class="mt-4 space-y-1">
      <p class="text-xs font-medium text-emerald-400 uppercase tracking-[0.16em] font-sans">
        Event
      </p>
      <h1 class="text-2xl md:text-3xl text-neutral-50 font-sans tracking-tight">
        Collaborative Stats Workshop
      </h1>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm border-t border-b border-neutral-800/70 pt-4 pb-4">
      <div class="space-y-1">
        <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
          Time
        </p>
        <p class="text-neutral-50 font-medium font-sans">
          Mar 4th · 11:00
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
          Location
        </p>
        <p class="text-neutral-50 font-medium font-sans">
          Aurora Hall · 210
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs font-medium text-neutral-400 uppercase tracking-[0.18em] font-sans">
          Track
        </p>
        <p class="text-neutral-50 font-medium font-sans">
          Data Foundations
        </p>
      </div>
    </div>

    <!-- Attendees vertical group -->
    <div class="flex items-center gap-4">
      <div class="flex -space-x-2">
        <img class="h-9 w-9 rounded-full border border-neutral-900 object-cover" src="https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?auto=format&amp;fit=crop&amp;w=200&amp;q=80" alt="Attendee avatar">
        <img class="h-9 w-9 rounded-full border border-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dbf5085e-0341-4243-aa8f-73a531c46290_320w.webp" alt="Attendee avatar">
        <img class="h-9 w-9 rounded-full border border-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e57b7081-23fd-4dd7-981e-59fc4fda47dc_320w.webp" alt="Attendee avatar">
      </div>
      <!-- perfect circle user+ -->
      <button class="flex hover:bg-emerald-400 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80 flex-none text-neutral-900 bg-emerald-500 w-9 h-9 rounded-full shadow-md items-center justify-center" type="button">
              <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:user-plus-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M16 6a4 4 0 1 1-8 0a4 4 0 0 1 8 0" class=""></path><path fill="currentColor" d="M14.477 21.92c-.726.053-1.547.08-2.477.08c-8 0-8-2.015-8-4.5S7.582 13 12 13c2.88 0 5.406.856 6.814 2.141C18.298 15 17.574 15 16.5 15c-1.65 0-2.475 0-2.987.513C13 16.025 13 16.85 13 18.5s0 2.475.513 2.987c.237.238.542.365.964.434" opacity=".5" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M16.5 22c-1.65 0-2.475 0-2.987-.513C13 20.975 13 20.15 13 18.5s0-2.475.513-2.987C14.025 15 14.85 15 16.5 15s2.475 0 2.987.513C20 16.025 20 16.85 20 18.5s0 2.475-.513 2.987C18.975 22 18.15 22 16.5 22m.583-5.056a.583.583 0 1 0-1.166 0v.973h-.973a.583.583 0 1 0 0 1.166h.973v.973a.583.583 0 1 0 1.166 0v-.973h.973a.583.583 0 1 0 0-1.166h-.973z" clip-rule="evenodd" class=""></path></svg>
            </button>
      <p class="text-xs text-neutral-400 font-sans">
        Invite peers to join this live workshop.
      </p>
    </div>
  </div>

  <!-- Upload assignment strip -->
  <div class="border-neutral-800/70 border-t mt-4 pt-4 pr-6 pb-6 pl-6">
    <div
      class="rounded-2xl border border-dashed border-emerald-500/30 bg-gradient-to-r from-emerald-500/10 to-emerald-500/5 p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <div class="space-y-1">
        <p class="text-sm font-medium text-neutral-50 tracking-tight font-sans">
          Upload your prep work
        </p>
        <p class="text-xs text-neutral-400 font-sans">
          You’ll unlock interactive boards after submitting your draft
          notes.
        </p>
      </div>
      <button class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-full bg-emerald-500 text-neutral-900 text-sm font-medium shadow hover:bg-emerald-400 transition outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500/80" type="button">
              <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:cloud-upload-bold-duotone" class="iconify w-4 h-4 iconify--solar"><path fill="currentColor" d="M6.5 18v-.09c0-.865 0-1.659.087-2.304c.095-.711.32-1.463.938-2.08c.618-.619 1.37-.844 2.08-.94c.646-.086 1.44-.086 2.306-.086h.178c.866 0 1.66 0 2.305.087c.711.095 1.463.32 2.08.938c.619.618.844 1.37.94 2.08c.085.637.086 1.416.086 2.267c2.573-.55 4.5-2.812 4.5-5.52c0-2.47-1.607-4.572-3.845-5.337C17.837 4.194 15.415 2 12.476 2C9.32 2 6.762 4.528 6.762 7.647c0 .69.125 1.35.354 1.962a4.4 4.4 0 0 0-.83-.08C3.919 9.53 2 11.426 2 13.765S3.919 18 6.286 18z" opacity=".5" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M12 14c-1.886 0-2.828 0-3.414.586S8 16.114 8 18s0 2.828.586 3.414S10.114 22 12 22s2.828 0 3.414-.586S16 19.886 16 18s0-2.828-.586-3.414S13.886 14 12 14m1.805 3.084l-1.334-1.333a.667.667 0 0 0-.942 0l-1.334 1.333a.667.667 0 1 0 .943.943l.195-.195v1.946a.667.667 0 0 0 1.334 0v-1.946l.195.195a.667.667 0 0 0 .943-.943" clip-rule="evenodd" class=""></path></svg>
              <span>Upload</span>
            </button>
    </div>
  </div>
</section>