Tailwind CSS Kanban Board Cards Blocks

All Blocks
Application UI
Productivity
Kanban Board Cards

Kanban Board Cards

Kanban board cards for tasks, deals, projects, and purchase order workflows.

Task Card with Issue Tags and Progress Bar Pro

Task board card combines issue tags, assignee avatars, message and file counts, and a progress bar footer.

<div class="p-2.5 flex flex-col gap-y-2.5 bg-layer border border-layer-line rounded-lg shadow-2xs cursor-pointer transition hover:border-line-3 hover:shadow-lg" role="button" data-hs-overlay="#hs-pro-eakcmpd">
                      <span class="block font-medium text-sm text-foreground">
                        Issue 323 - add disabled option to advanced select (tags mode)
                      </span>

<div class="flex flex-wrap gap-2">
                        
                        <div class="flex items-center gap-x-1">
                          <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          <div class="grow">
                            <span class="block text-[13px] text-foreground">
                              James Collins
                            </span>
                          </div>
                        </div>

<div class="flex items-center gap-x-1">
                          <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          <div class="grow">
                            <span class="block text-[13px] text-foreground">
                              Daniel Hobbs
                            </span>
                          </div>
                        </div>

<div class="flex items-center gap-x-1">
                          <span class="flex shrink-0 justify-center items-center size-5 bg-orange-100 text-orange-800 text-[11px] font-semibold rounded-full dark:border-orange-500/20 dark:bg-orange-500/10 dark:text-orange-500">L</span>
                          <div class="grow">
                            <span class="block text-[13px] text-foreground">
                              Liza Harrison
                            </span>
                          </div>
                        </div>
                        
                      </div>

<div class="flex flex-wrap gap-1">
                        <span class="py-0.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full border border-red-200 bg-red-100 text-red-800 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-500">
                          High 🔥
                        </span>
                      </div>

<div class="flex flex-wrap gap-1">
                        <span class="py-0.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-layer-line text-layer-foreground">
                          Support 🙏
                        </span>
                        <span class="py-0.5 px-2 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-layer border border-layer-line text-layer-foreground">
                          Improvement 📈
                        </span>
                      </div>

<div class="flex items-center">
                        <span class="flex justify-center items-center gap-x-1 text-xs text-muted-foreground-1">
                          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
                          17
                        </span>

CRM Deal Card with Company Logo, Owner Avatar, and Metrics Pro

CRM deal card combines a company mark, lead owner, time, contact count, and deal value inside a compact sales card.

<div class="bg-card border border-card-line cursor-pointer rounded-lg transition hover:bg-muted-hover" role="button" data-hs-overlay="#hs-pro-eakcmpd">
                      <div class="p-2 flex items-center gap-x-2 border-b border-card-header">
                        <span class="flex shrink-0 justify-center items-center size-6.5 border border-layer-line text-layer-foreground rounded-md">
                          <svg class="shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.34318 0.00012207H24.6569C28.725 0.00012207 32 3.27516 32 7.34327V24.657C32 28.7251 28.725 32.0001 24.6569 32.0001H7.34318C3.27507 32.0001 2.52724e-05 28.7251 2.52724e-05 24.657V7.34327C2.52724e-05 3.27516 3.27507 0.00012207 7.34318 0.00012207Z" fill="url(#paint0_linear_5465123)"/><path d="M7.01113 9.1001C6.84252 9.1001 6.68368 9.12919 6.53335 9.18899L9.54446 12.289L12.5889 15.4446L12.6445 15.5112L12.8222 15.689L13 15.8779L15.6111 18.5557C15.6546 18.5827 15.7806 18.6994 15.879 18.7486C16.0058 18.812 16.1432 18.8704 16.2849 18.8754C16.4377 18.8809 16.594 18.8371 16.7315 18.7702C16.8345 18.7201 16.8803 18.6483 17 18.5557L20.0222 15.4334L26.0222 9.25566C25.8332 9.15324 25.6239 9.1001 25.4 9.1001H7.01113ZM6.08891 9.47788C5.7678 9.78214 5.56668 10.2395 5.56668 10.7557V20.9334C5.56668 21.3513 5.7009 21.731 5.92224 22.0223L6.34446 21.6223L9.48891 18.5668L12.2778 15.8668L12.2222 15.8001L9.16668 12.6557L6.11113 9.5001L6.08891 9.47788ZM26.4222 9.57788L20.4 15.8001L20.3445 15.8557L23.2445 18.6668L26.3889 21.7223L26.5778 21.9001C26.7471 21.6285 26.8445 21.2938 26.8445 20.9334V10.7557C26.8445 10.2955 26.685 9.87817 26.4222 9.57788ZM12.6333 16.2334L9.85557 18.9334L6.70002 21.989L6.30002 22.3779C6.5109 22.5137 6.75088 22.6001 7.01113 22.6001H25.4C25.7129 22.6001 25.9967 22.4797 26.2334 22.289L26.0334 22.089L22.8778 19.0334L19.9778 16.2334L17.3667 18.9223C17.2254 19.016 17.1309 19.1199 16.9929 19.1837C16.7709 19.2864 16.5275 19.3733 16.2828 19.3696C16.0375 19.3658 15.797 19.2698 15.5768 19.1615C15.4663 19.1072 15.4074 19.0531 15.2778 18.9446L12.6333 16.2334Z" fill="white"/><defs><linearGradient id="paint0_linear_5465123" x1="16.2241" y1="31.8717" x2="16.2552" y2="0.386437" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#70EFFF"/><stop offset="1" stop-color="#5770FF"/></linearGradient></defs></svg>
                        </span>
                        <p class="truncate font-medium text-sm text-foreground">
                          Lumen Systems
                        </p>
                      </div>

<div class="p-3">
                        
                        <div class="py-0.5 flex justify-between items-center gap-x-2">
                          <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                            <span class="size-5 flex shrink-0 justify-center items-center">
                              <svg class="hidden shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            </span>
                            Total hours:
                          </span>
                          <span class="text-sm text-foreground">
                            55m
                          </span>
                        </div>

<div class="py-0.5 flex justify-between items-center gap-x-2">
                          <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                            <span class="size-5 flex shrink-0 justify-center items-center">
                              <svg class="hidden shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                            </span>
                            Days:
                          </span>
                          <span class="text-sm text-foreground">
                            2
                          </span>
                        </div>

<div class="py-0.5 flex justify-between items-center gap-x-2">
                          <span class="flex items-center gap-x-2.5 text-xs text-muted-foreground-2">
                            <span class="size-5 flex shrink-0 justify-center items-center">
                              <svg class="hidden shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
                            </span>
                            Project cost:
                          </span>
                          <span class="text-sm text-foreground">
                            $400
                          </span>
                        </div>

<div class="mt-2 flex items-center gap-x-2.5">
                          <img class="shrink-0 size-5 rounded-md" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          <div class="grow">
                            <span class="text-sm text-foreground">
                              Anna Richard
                            </span>
                          </div>
                        </div>
                        
                      </div>
                    </div>

Open related CRM tasks template

Project Card with Team Avatars and Metrics Pro

Project card combines schedule, task count, budget, team avatars, and activity counts in a compact workspace card.

<div class="p-2 bg-card border border-card-line ring-1 ring-transparent cursor-pointer rounded-lg transition hover:border-primary-hover hover:ring-primary-hover hover:shadow-lg" role="button" data-hs-overlay="#hs-pro-eakcmpd">
                      <h4 class="mb-1 font-medium text-foreground">
                        Boston Dynamics
                      </h4>

<div class="py-1 last:pb-2 flex justify-between items-center gap-x-2">
                        <span class="flex items-center gap-x-1.5 text-xs text-muted-foreground-2">
                          <svg class="shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                          Total hours:
                        </span>
                        <span class="text-sm font-medium text-foreground">
                          45h 23m
                        </span>
                      </div>

<div class="py-1 last:pb-2 flex justify-between items-center gap-x-2">
                        <span class="flex items-center gap-x-1.5 text-xs text-muted-foreground-2">
                          <svg class="shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
                          Days:
                        </span>
                        <span class="text-sm font-medium text-foreground">
                          14
                        </span>
                      </div>

<div class="py-1 last:pb-2 flex justify-between items-center gap-x-2">
                        <span class="flex items-center gap-x-1.5 text-xs text-muted-foreground-2">
                          <svg class="shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>
                          Project cost:
                        </span>
                        <span class="text-sm font-medium text-foreground">
                          $400,000
                        </span>
                      </div>

<div class="py-1 last:pb-2 flex justify-between items-center gap-x-2">
                        <span class="flex items-center gap-x-1.5 text-xs text-muted-foreground-2">
                          <svg class="shrink-0 size-3 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                          Assignee:
                        </span>

<div class="flex items-center -space-x-1">
                          
                          <div class="relative flex size-5 rounded-full ring-2 ring-card">
                            <img class="shrink-0 size-full  rounded-md" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          </div>

<div class="relative flex size-5 rounded-md ring-2 ring-card">
                            <img class="shrink-0 size-full  rounded-md" src="https://images.unsplash.com/photo-1601935111741-ae98b2b230b0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          </div>
                          
        
                          
                          <div class="relative flex size-5 rounded-md ring-2 ring-card">
                            <img class="shrink-0 size-full  rounded-md" src="https://images.unsplash.com/photo-1670272505340-d906d8d77d03?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                          </div>
                          
        
                          
                          <div class="relative flex size-5 rounded-md ring-2 ring-card"><span class="flex shrink-0 justify-center items-center size-5 bg-surface text-surface-foreground text-[10px] font-medium uppercase rounded-md ">+4</span>
                          </div>
                          
                        </div>
                        
                      </div>

<div class="py-1 last:pb-2 flex items-center">
                        <span class="flex justify-center items-center gap-x-1 text-xs text-muted-foreground-1">
                          <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
                          138
                        </span>

Purchase Order Card with Product Image Group Pro

Purchase order card combines an order number, purchased item summary, and stacked product thumbnails in a compact commerce card.

<a class="p-2 block bg-layer border border-layer-line rounded-lg transition hover:border-line-3 hover:shadow-lg focus:outline-hidden focus:border-line-3 focus:shadow-lg" href="../../../templates/ecommerce/admin/order-details.html">
                      <dl class="flex items-center gap-x-1">
                        <dt class="min-w-20 text-sm text-muted-foreground-1">
                          Order:
                        </dt>
                        <dd class="truncate font-medium text-sm text-foreground">
                          #37646
                        </dd>
                      </dl>
                      <dl class="flex items-center gap-x-1">
                        <dt class="min-w-20 text-sm text-muted-foreground-1">
                          Purchased:
                        </dt>
                        <dd class="truncate font-medium text-sm text-foreground">
                          Green Blazer, Pink Trousers, and 15 more items
                        </dd>
                      </dl>
  
                      <div class="mt-3 grid grid-cols-3 gap-2">
                        <img class="shrink-0 w-full h-auto rounded-md" src="https://images.unsplash.com/photo-1536992266094-82847e1fd431?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                        <img class="shrink-0 w-full h-auto rounded-md" src="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                        <span class="flex justify-center items-center bg-surface border border-surface-line text-surface-foreground rounded-md">+15</span>
                      </div>
                    </a>

Open related purchase orders template