Kanban Base

<section class="ws-kanban bg-slate-50 p-6">
  <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
    <h2 class="text-xl font-bold text-slate-900">Project Board</h2>
    <div class="flex items-center gap-3">
      <div class="flex -space-x-2">
        <div class="h-8 w-8 rounded-full bg-slate-300 ring-2 ring-white"></div>
        <div class="h-8 w-8 rounded-full bg-slate-400 ring-2 ring-white"></div>
        <div class="h-8 w-8 rounded-full bg-slate-500 ring-2 ring-white"></div>
      </div>
      <button class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-800 dark:hover:bg-slate-100">Add Task</button> <!-- ws-ok: CTA button -->
    </div>
  </div>

  <div class="flex gap-5 overflow-x-auto pb-4">
    <!-- Column: To Do -->
    <div class="w-72 shrink-0">
      <div class="mb-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="h-2.5 w-2.5 rounded-full bg-slate-400"></span>
          <h3 class="text-sm font-semibold text-slate-700">To Do</h3>
          <span class="rounded-full bg-slate-200 px-2 py-0.5 text-xs font-medium text-slate-600">3</span>
        </div>
        <button class="text-slate-400 hover:text-slate-600" aria-label="Add task">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
        </button>
      </div>
      <div class="space-y-3">
        <article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="mb-3 flex items-center justify-between">
            <span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-medium text-amber-700">Design</span>
            <span class="text-xs text-slate-400">3 days left</span>
          </div>
          <h4 class="mb-2 text-sm font-semibold text-slate-900">Redesign landing page</h4>
          <p class="text-xs text-slate-500">Update hero section and CTA placement for better conversion.</p>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex -space-x-1.5">
              <div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
              <div class="h-6 w-6 rounded-full bg-slate-400 ring-2 ring-white"></div>
            </div>
            <div class="flex items-center gap-3 text-xs text-slate-400">
              <span class="flex items-center gap-1">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                4
              </span>
              <span class="flex items-center gap-1">
                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
                2
              </span>
            </div>
          </div>
        </article>
        <article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="mb-3">
            <span class="rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-700">Development</span>
          </div>
          <h4 class="mb-2 text-sm font-semibold text-slate-900">API integration</h4>
          <p class="text-xs text-slate-500">Connect payment gateway and test webhook endpoints.</p>
          <div class="mt-3 flex items-center justify-between">
            <div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
            <span class="text-xs text-slate-400">5 days left</span>
          </div>
        </article>
      </div>
    </div>

    <!-- Column: In Progress -->
    <div class="w-72 shrink-0">
      <div class="mb-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="h-2.5 w-2.5 rounded-full bg-blue-500"></span>
          <h3 class="text-sm font-semibold text-slate-700">In Progress</h3>
          <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-600">2</span>
        </div>
        <button class="text-slate-400 hover:text-slate-600" aria-label="Add task">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
        </button>
      </div>
      <div class="space-y-3">
        <article class="rounded-xl border border-blue-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="mb-2 h-32 rounded-lg bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/20 dark:to-indigo-900/20"></div>
          <div class="mb-3">
            <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Marketing</span>
          </div>
          <h4 class="mb-2 text-sm font-semibold text-slate-900">Social media campaign</h4>
          <div class="mt-3 flex items-center justify-between">
            <div class="flex -space-x-1.5">
              <div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
              <div class="h-6 w-6 rounded-full bg-slate-400 ring-2 ring-white"></div>
              <div class="h-6 w-6 rounded-full bg-slate-500 ring-2 ring-white"></div>
            </div>
            <span class="text-xs text-slate-400">1 day left</span>
          </div>
        </article>
      </div>
    </div>

    <!-- Column: Review -->
    <div class="w-72 shrink-0">
      <div class="mb-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="h-2.5 w-2.5 rounded-full bg-amber-500"></span>
          <h3 class="text-sm font-semibold text-slate-700">Review</h3>
          <span class="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-600">1</span>
        </div>
        <button class="text-slate-400 hover:text-slate-600" aria-label="Add task">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M12 5v14m-7-7h14"/></svg>
        </button>
      </div>
      <div class="space-y-3">
        <article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 shadow-sm">
          <div class="mb-3 flex items-center justify-between">
            <span class="rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-700">Content</span>
            <span class="text-xs text-red-500 font-medium">Overdue</span>
          </div>
          <h4 class="mb-2 text-sm font-semibold text-slate-900">Write blog article</h4>
          <p class="text-xs text-slate-500">Draft article about new product features and benefits.</p>
          <div class="mt-3 flex items-center justify-between">
            <div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
            <div class="flex items-center gap-1 text-xs text-slate-400">
              <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
              7
            </div>
          </div>
        </article>
      </div>
    </div>

    <!-- Column: Done -->
    <div class="w-72 shrink-0">
      <div class="mb-3 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
          <h3 class="text-sm font-semibold text-slate-700">Done</h3>
          <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-600">2</span>
        </div>
      </div>
      <div class="space-y-3">
        <article class="rounded-xl border border-slate-200 bg-[var(--ws-color-surface)] p-4 opacity-75 shadow-sm">
          <div class="mb-3">
            <span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500 line-through">Design</span>
          </div>
          <h4 class="mb-2 text-sm font-semibold text-slate-500 line-through">Create wireframes</h4>
          <div class="mt-3 flex items-center justify-between">
            <div class="h-6 w-6 rounded-full bg-slate-300 ring-2 ring-white"></div>
            <span class="text-xs text-emerald-500">Completed</span>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>