Thumbnail Strip

Row of thumbnails used to navigate media.

html

<div class="tstrip" style="gap:8px;">
  <button type="button" class="tstrip__item is-active" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 1" aria-current="true">
    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true"><rect width="40" height="40" fill="#A8E6C1"/></svg>
  </button>
  <button type="button" class="tstrip__item" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 2">
    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true"><rect width="40" height="40" fill="#F5C2E0"/></svg>
  </button>
  <button type="button" class="tstrip__item" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 3">
    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true"><rect width="40" height="40" fill="#BFD9F2"/></svg>
  </button>
  <button type="button" class="tstrip__item" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 4">
    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true"><rect width="40" height="40" fill="#D9C8F0"/></svg>
  </button>
  <button type="button" class="tstrip__item" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 5">
    <svg viewBox="0 0 40 40" width="100%" height="100%" aria-hidden="true"><rect width="40" height="40" fill="#E8A020"/></svg>
  </button>
</div>
<style>
.tstrip { display: flex; overflow-x: auto; max-width: 340px; padding: 4px; }
.tstrip__item { flex: none; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; overflow: hidden; }
.tstrip__item svg { display: block; }
.tstrip__item:hover, .tstrip__item:focus-visible { border-color: var(--accent); outline: none; }
.tstrip__item.is-active { border-color: var(--accent); }
</style>

tailwind

<div class="tstrip-tw flex overflow-x-auto max-w-[340px] p-1" style="gap:8px;">
  <button type="button" class="tstrip-tw__item is-active flex-none p-0 border-2 border-transparent bg-transparent cursor-pointer overflow-hidden" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 1" aria-current="true">
    <svg viewBox="0 0 40 40" width="100%" height="100%" class="block" aria-hidden="true"><rect width="40" height="40" fill="#A8E6C1"/></svg>
  </button>
  <button type="button" class="tstrip-tw__item flex-none p-0 border-2 border-transparent bg-transparent cursor-pointer overflow-hidden" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 2">
    <svg viewBox="0 0 40 40" width="100%" height="100%" class="block" aria-hidden="true"><rect width="40" height="40" fill="#F5C2E0"/></svg>
  </button>
  <button type="button" class="tstrip-tw__item flex-none p-0 border-2 border-transparent bg-transparent cursor-pointer overflow-hidden" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 3">
    <svg viewBox="0 0 40 40" width="100%" height="100%" class="block" aria-hidden="true"><rect width="40" height="40" fill="#BFD9F2"/></svg>
  </button>
  <button type="button" class="tstrip-tw__item flex-none p-0 border-2 border-transparent bg-transparent cursor-pointer overflow-hidden" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 4">
    <svg viewBox="0 0 40 40" width="100%" height="100%" class="block" aria-hidden="true"><rect width="40" height="40" fill="#D9C8F0"/></svg>
  </button>
  <button type="button" class="tstrip-tw__item flex-none p-0 border-2 border-transparent bg-transparent cursor-pointer overflow-hidden" style="width:56px;height:56px;border-radius:8px;--accent:#D9C8F0;" aria-label="View item 5">
    <svg viewBox="0 0 40 40" width="100%" height="100%" class="block" aria-hidden="true"><rect width="40" height="40" fill="#E8A020"/></svg>
  </button>
</div>
<style>
.tstrip-tw__item:hover, .tstrip-tw__item:focus-visible { border-color: var(--accent); outline: none; }
.tstrip-tw__item.is-active { border-color: var(--accent); }
</style>

react

export function ThumbnailStrip({
  accent = "#D9C8F0",
  thumbSize = 56,
  gap = 8,
  radius = 8,
}) {
  const colors = ["#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020"];
  return (
    <div style={{ display: "flex", overflowX: "auto", maxWidth: 340, padding: 4, gap }}>
      {colors.map((fill, i) => (
        <button
          key={fill}
          type="button"
          aria-label={`View item ${i + 1}`}
          aria-current={i === 0 ? "true" : undefined}
          style={{ flex: "none", padding: 0, cursor: "pointer", overflow: "hidden", background: "none",
            width: thumbSize, height: thumbSize, borderRadius: radius,
            border: `2px solid ${i === 0 ? accent : "transparent"}` }}
        >
          <svg viewBox="0 0 40 40" width="100%" height="100%" style={{ display: "block" }} aria-hidden="true">
            <rect width="40" height="40" fill={fill} />
          </svg>
        </button>
      ))}
    </div>
  );
}