Team List

List of teams.

html

<section class="teamlist teamlist--comfortable" style="--c:#F5C2E0;">
  <h3 class="teamlist__title">Teams</h3>
  <ul class="teamlist__items">
    <li class="teamlist__item"><span class="teamlist__name">Platform</span><span class="teamlist__count">8 members</span></li>
    <li class="teamlist__item"><span class="teamlist__name">Design</span><span class="teamlist__count">5 members</span></li>
    <li class="teamlist__item"><span class="teamlist__name">Marketing</span><span class="teamlist__count">4 members</span></li>
  </ul>
</section>
<style>
.teamlist { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 300px; }
.teamlist__title { margin: 0 0 8px; font-size: 16px; }
.teamlist__items { list-style: none; margin: 0; padding: 0; border-top: 1px solid #24143018; }
.teamlist__item { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid #24143018; border-left: 3px solid var(--c); padding-left: 10px; }
.teamlist--compact .teamlist__item { padding-top: 5px; padding-bottom: 5px; }
.teamlist__count { font-size: 12px; opacity: .7; }
</style>

tailwind

<section class="teamlist-tw teamlist-tw--comfortable font-sans text-[#241430] max-w-xs" style="--c:#F5C2E0;">
  <h3 class="m-0 mb-2 text-base">Teams</h3>
  <ul class="list-none m-0 p-0 border-t border-[#24143018]">
    <li class="teamlist-tw__item flex justify-between items-center py-2.5 pr-1 border-b border-[#24143018] border-l-[3px] pl-2.5" style="border-left-color:var(--c);"><span>Platform</span><span class="text-xs opacity-70">8 members</span></li>
    <li class="teamlist-tw__item flex justify-between items-center py-2.5 pr-1 border-b border-[#24143018] border-l-[3px] pl-2.5" style="border-left-color:var(--c);"><span>Design</span><span class="text-xs opacity-70">5 members</span></li>
    <li class="teamlist-tw__item flex justify-between items-center py-2.5 pr-1 border-b border-[#24143018] border-l-[3px] pl-2.5" style="border-left-color:var(--c);"><span>Marketing</span><span class="text-xs opacity-70">4 members</span></li>
  </ul>
</section>
<style>
.teamlist-tw--compact .teamlist-tw__item { padding-top: 5px; padding-bottom: 5px; }
</style>

react

const TEAMS = [
  { name: "Platform", count: 8 },
  { name: "Design", count: 5 },
  { name: "Marketing", count: 4 },
];

export function TeamList({
  title = "Teams",
  color = "#F5C2E0",
  density = "comfortable",
  showCount = true,
}) {
  const pad = density === "compact" ? "5px 4px" : "10px 4px";
  return (
    <section style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 300 }}>
      <h3 style={{ margin: "0 0 8px", fontSize: 16 }}>{title}</h3>
      <ul style={{ listStyle: "none", margin: 0, padding: 0, borderTop: "1px solid #24143018" }}>
        {TEAMS.map((team) => (
          <li key={team.name} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: pad, paddingLeft: 10, borderBottom: "1px solid #24143018", borderLeft: `3px solid ${color}` }}>
            <span>{team.name}</span>
            {showCount && <span style={{ fontSize: 12, opacity: 0.7 }}>{team.count} members</span>}
          </li>
        ))}
      </ul>
    </section>
  );
}