Playlist

Ordered queue of media items.

html

<ul class="playlist playlist--comfortable">
  <li class="playlist__item is-now-playing" style="--accent:#E8A020;">
    <span class="playlist__art" aria-hidden="true"></span>
    <span class="playlist__meta">
      <span class="playlist__title">Slow Static</span>
      <span class="playlist__now" aria-hidden="true">Now playing</span>
    </span>
    <span class="playlist__duration">3:12</span>
  </li>
  <li class="playlist__item">
    <span class="playlist__art" aria-hidden="true"></span>
    <span class="playlist__meta">
      <span class="playlist__title">Amber Fields</span>
    </span>
    <span class="playlist__duration">4:05</span>
  </li>
  <li class="playlist__item">
    <span class="playlist__art" aria-hidden="true"></span>
    <span class="playlist__meta">
      <span class="playlist__title">Quiet Harbour</span>
    </span>
    <span class="playlist__duration">2:47</span>
  </li>
</ul>
<style>
.playlist { list-style: none; margin: 0; padding: 0; max-width: 340px; font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; overflow: hidden; }
.playlist__item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #24143014; }
.playlist__item:last-child { border-bottom: none; }
.playlist--compact .playlist__item { padding: 7px 12px; }
.playlist__item.is-now-playing { background: #24143010; border-left: 3px solid var(--accent); }
.playlist__art { width: 28px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #BFD9F2, #D9C8F0); flex: none; }
.playlist--compact .playlist__art { width: 20px; height: 20px; }
.playlist__meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.playlist__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist__now { font-size: 11px; color: var(--accent); font-weight: 600; }
.playlist__duration { font-size: 12px; color: #24143099; flex: none; }
</style>

tailwind

<ul class="playlist-tw playlist-tw--comfortable list-none m-0 p-0 max-w-[340px] font-sans text-sm text-[#241430] bg-[#FAF7F2] border border-[#24143022] rounded-xl overflow-hidden" style="--accent:#E8A020;">
  <li class="flex items-center gap-2.5 px-3.5 py-3 border-b border-[#24143014]" style="background:#24143010;border-left:3px solid var(--accent);">
    <span class="w-7 h-7 rounded-md flex-none" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);" aria-hidden="true"></span>
    <span class="flex flex-col flex-1 min-w-0">
      <span class="font-semibold overflow-hidden text-ellipsis whitespace-nowrap">Slow Static</span>
      <span class="text-[11px] font-semibold" style="color:var(--accent);" aria-hidden="true">Now playing</span>
    </span>
    <span class="text-xs text-[#241430]/60 flex-none">3:12</span>
  </li>
  <li class="flex items-center gap-2.5 px-3.5 py-3 border-b border-[#24143014]">
    <span class="w-7 h-7 rounded-md flex-none" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);" aria-hidden="true"></span>
    <span class="flex flex-col flex-1 min-w-0">
      <span class="font-semibold overflow-hidden text-ellipsis whitespace-nowrap">Amber Fields</span>
    </span>
    <span class="text-xs text-[#241430]/60 flex-none">4:05</span>
  </li>
  <li class="flex items-center gap-2.5 px-3.5 py-3">
    <span class="w-7 h-7 rounded-md flex-none" style="background:linear-gradient(135deg,#BFD9F2,#D9C8F0);" aria-hidden="true"></span>
    <span class="flex flex-col flex-1 min-w-0">
      <span class="font-semibold overflow-hidden text-ellipsis whitespace-nowrap">Quiet Harbour</span>
    </span>
    <span class="text-xs text-[#241430]/60 flex-none">2:47</span>
  </li>
</ul>
<style>
.playlist-tw--compact li { padding-top: 7px; padding-bottom: 7px; }
</style>

react

export function Playlist({
  layout = "comfortable",
  accent = "#E8A020",
  showDuration = true,
  showArt = true,
}) {
  const compact = layout === "compact";
  const tracks = [
    { title: "Slow Static", duration: "3:12", now: true },
    { title: "Amber Fields", duration: "4:05", now: false },
    { title: "Quiet Harbour", duration: "2:47", now: false },
  ];
  return (
    <ul style={{ listStyle: "none", margin: 0, padding: 0, maxWidth: 340, font: "14px/1.4 system-ui, sans-serif",
      color: "#241430", background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, overflow: "hidden" }}>
      {tracks.map((track, i) => (
        <li key={track.title} style={{ display: "flex", alignItems: "center", gap: 10,
          padding: compact ? "7px 12px" : "12px 14px",
          borderBottom: i < tracks.length - 1 ? "1px solid #24143014" : "none",
          background: track.now ? "#24143010" : "transparent",
          borderLeft: track.now ? `3px solid ${accent}` : "3px solid transparent" }}>
          {showArt && (
            <span style={{ width: compact ? 20 : 28, height: compact ? 20 : 28, borderRadius: 6,
              background: "linear-gradient(135deg,#BFD9F2,#D9C8F0)", flex: "none" }} aria-hidden="true" />
          )}
          <span style={{ display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }}>
            <span style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {track.title}
            </span>
            {track.now && (
              <span style={{ fontSize: 11, fontWeight: 600, color: accent }} aria-hidden="true">Now playing</span>
            )}
          </span>
          {showDuration && <span style={{ fontSize: 12, color: "#24143099", flex: "none" }}>{track.duration}</span>}
        </li>
      ))}
    </ul>
  );
}