Tailwind CSS Projects Blocks

Projects

Explore project cards and status summaries for dashboards, workspaces, and collaboration-focused interfaces.

Project Cards Grid Pro

Each project card combines owner avatars, dates, counts, and progress in a stacked tile layout.

<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                      
                      <div class="flex flex-col bg-card border border-card-line rounded-xl truncate">
                        
                        <div class="p-4 relative flex gap-x-3">
                          
                          <div class="shrink-0">
                            <div class="shrink-0 border border-line-2 rounded-xl">
                              <div class="size-12 flex justify-center items-center"><svg class="shrink-0 size-6 text-muted-foreground-1" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.7326 0C9.96372 0.00130479 8.53211 1.43397 8.53342 3.19935C8.53211 4.96473 9.96503 6.39739 11.7339 6.39869H14.9345V3.20065C14.9358 1.43527 13.5029 0.00260958 11.7326 0C11.7339 0 11.7339 0 11.7326 0M11.7326 8.53333H3.20053C1.43161 8.53464 -0.00130383 9.9673 3.57297e-06 11.7327C-0.00261123 13.4981 1.4303 14.9307 3.19922 14.9333H11.7326C13.5016 14.932 14.9345 13.4994 14.9332 11.734C14.9345 9.9673 13.5016 8.53464 11.7326 8.53333V8.53333Z" fill="#36C5F0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M32 11.7327C32.0013 9.9673 30.5684 8.53464 28.7995 8.53333C27.0306 8.53464 25.5976 9.9673 25.5989 11.7327V14.9333H28.7995C30.5684 14.932 32.0013 13.4994 32 11.7327ZM23.4666 11.7327V3.19935C23.4679 1.43527 22.0363 0.00260958 20.2674 0C18.4984 0.00130479 17.0655 1.43397 17.0668 3.19935V11.7327C17.0642 13.4981 18.4971 14.9307 20.2661 14.9333C22.035 14.932 23.4679 13.4994 23.4666 11.7327Z" fill="#2EB67D"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.2661 32C22.035 31.9987 23.4679 30.566 23.4666 28.8007C23.4679 27.0353 22.035 25.6026 20.2661 25.6013H17.0656V28.8007C17.0642 30.5647 18.4972 31.9974 20.2661 32ZM20.2661 23.4654H28.7995C30.5684 23.4641 32.0013 22.0314 32 20.266C32.0026 18.5006 30.5697 17.068 28.8008 17.0654H20.2674C18.4985 17.0667 17.0656 18.4993 17.0669 20.2647C17.0656 22.0314 18.4972 23.4641 20.2661 23.4654V23.4654Z" fill="#ECB22E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.93953e-07 20.266C-0.00130651 22.0314 1.43161 23.4641 3.20052 23.4654C4.96944 23.4641 6.40235 22.0314 6.40105 20.266V17.0667H3.20052C1.43161 17.068 -0.00130651 18.5006 8.93953e-07 20.266ZM8.53342 20.266V28.7993C8.53081 30.5647 9.96372 31.9974 11.7326 32C13.5016 31.9987 14.9345 30.566 14.9332 28.8007V20.2686C14.9358 18.5032 13.5029 17.0706 11.7339 17.068C9.96372 17.068 8.53211 18.5006 8.53342 20.266C8.53342 20.2673 8.53342 20.266 8.53342 20.266Z" fill="#E01E5A"/></svg></div>
                            </div>
                          </div>

<div class="grow truncate mt-1">
                            <div class="pe-7">
                              <span class="block text-sm text-foreground">
                                Slack Inc.
                              </span>
                            </div>

<div class="hs-tooltip shrink-0 block">
                              <p class="hs-tooltip-toggle font-medium truncate text-foreground">
                                Illustration of Materials Design
                              </p>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 max-w-48 text-wrap bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Illustration of Materials Design
                              </span>
                            </div>
                          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-28 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpmd1">
                                <div class="p-1 space-y-0.5">
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/><path d="m15 5 3 3"/></svg>
                                    Edit
                                  </button>
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                    Share
                                  </button>
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                    Delete
                                  </button>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>

<div class="py-3 grid grid-cols-3 border-y border-card-divider divide-x divide-card-divider">
                          
                          <div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              34
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              Tasks
                            </p>
                          </div>

<div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              19
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              In Progress
                            </p>
                          </div>

<div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              14
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              Completed
                            </p>
                          </div>
                          
                        </div>

<div class="p-4 flex flex-col gap-y-4">
                          
                          <div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Due date
                            </p>
                            <div class="grow">
                              <p class="font-medium text-sm text-foreground">
                                12 July, 2024
                              </p>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Category
                            </p>
                            <div class="grow">
                              <span class="py-px px-2 inline-flex items-center gap-x-1.5 bg-surface text-sm text-surface-foreground rounded-md">
                                <span class="inline-block w-1 h-3 bg-purple-500 rounded-full"></span>
                                Illustration
                              </span>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Assignee
                            </p>
                            <div class="grow">
                              <div class="flex items-center gap-x-1.5">
                                <img class="shrink-0 size-4 rounded-md" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="assigneeAvatar">
                                <span class="font-medium text-sm text-foreground">Amanda Harvey</span>
                              </div>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Last edited
                            </p>
                            <div class="grow">
                              <div class="flex items-center gap-x-1.5">
                                <img class="shrink-0 size-4 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="lastEditedAvatar">
                                <span class="font-medium text-sm text-foreground">James Collins</span>
                              </div>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Team:
                            </p>
                            <div class="grow">
                              
                              <div class="flex items-center">
                                
                                <div class="flex items-center sm:-space-x-px">
                                  
                                  <div class="hs-tooltip shrink-0 hidden sm:block">
                                    <div class="relative hover:z-10 flex size-4 rounded-md ring-card ring-2 bg-layer">
                                      <img class="hs-tooltip-toggle shrink-0 size-full  size-4 rounded-md ring-card" 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>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      James Collins (You)
                                      <span class="block text-[11px] text-tooltip-foreground/60">Online</span>
                                    </span>
                                  </div>

<div class="hs-tooltip shrink-0 hidden sm:block">
                                    <div class="relative hover:z-10 flex size-4 rounded-md ring-card ring-2 bg-layer">
                                      <img class="hs-tooltip-toggle shrink-0 size-full  size-4 rounded-md ring-card" 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>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Daniel Hobbs
                                      <span class="block text-[11px] text-tooltip-foreground/60">Last seen 1 mins ago</span>
                                    </span>
                                  </div>
                                  
      
                                  
                                  <div class="hs-tooltip shrink-0 hidden sm:block">
                                    <div class="relative hover:z-10 flex size-4 rounded-md ring-card ring-2 bg-layer">
                                      <img class="hs-tooltip-toggle shrink-0 size-full  size-4 rounded-md ring-card" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                    </div>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Amanda Harvey
                                      <span class="block text-[11px] text-tooltip-foreground/60">Last seen 5 mins ago</span>
                                    </span>
                                  </div>
                                  
      
                                  
                                  <div class="hs-tooltip shrink-0 hidden sm:block">
                                    <div class="relative hover:z-10 flex size-4 rounded-md ring-card ring-2 bg-layer"><span class="hs-tooltip-toggle flex shrink-0 justify-center items-center bg-surface text-surface-foreground text-xs font-medium uppercase size-4 rounded-md ring-card ">L</span>
                                    </div>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg whitespace-nowrap" role="tooltip">
                                      Liza Harrison
                                      <span class="block text-[11px] text-tooltip-foreground/60">Last seen 3 hours ago</span>
                                    </span>
                                  </div>
                                  
                                </div>

<div class="hs-dropdown [--placement:top-right] [--trigger:hover] [--scope:window] relative  inline-flex">
                                  <button id="hs-pro-wpagd1" type="button" class="flex justify-center items-center gap-x-1 text-sm text-muted-foreground-1 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <svg class="sm:hidden shrink-0 size-4" 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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                                    <span class="sm:hidden">+6</span>
                                    <span class="hidden sm:block ms-1.5">+2</span>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-inverse border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpagd1">
                                    <div class="relative hover:z-10 p-3 max-h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track-inverse [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb-inverse">
                                      <span class="block mb-2 text-[11px] uppercase text-muted-foreground">Last seen by</span>

<div class="space-y-2">
                                        
                                        <div class="sm:hidden flex items-center gap-x-2">
                                          <div class="shrink-0">
                                            <img class="shrink-0 size-7 size-4 rounded-md ring-card" 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="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              James Collins (You)
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Online
                                            </p>
                                          </div>
                                        </div>

<div class="sm:hidden flex items-center gap-x-2">
                                          <div class="shrink-0">
                                            <img class="shrink-0 size-7 size-4 rounded-md ring-card" 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="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Daniel Hobbs
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 1 mins ago
                                            </p>
                                          </div>
                                        </div>

<div class="sm:hidden flex items-center gap-x-2">
                                          <div class="shrink-0">
                                            <img class="shrink-0 size-7 size-4 rounded-md ring-card" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                          </div>
                                          <div class="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Amanda Harvey
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 5 mins ago
                                            </p>
                                          </div>
                                        </div>

<div class="sm:hidden flex items-center gap-x-2">
                                          <div class="shrink-0"><span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-7 bg-plain/10 text-foreground-inverse text-xs font-medium uppercase size-4 rounded-md ring-card">L</span>
                                          </div>
                                          <div class="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Liza Harrison
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 3 hours ago
                                            </p>
                                          </div>
                                        </div>

<div class=" flex items-center gap-x-2">
                                          <div class="shrink-0">
                                            <img class="shrink-0 size-7 size-4 rounded-md ring-card" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                          </div>
                                          <div class="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Crane
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 1 day ago
                                            </p>
                                          </div>
                                        </div>

<div class=" flex items-center gap-x-2">
                                          <div class="shrink-0"><span class="hs-tooltip-toggle flex shrink-0 justify-center items-center size-7 bg-plain/10 text-foreground-inverse text-xs font-medium uppercase size-4 rounded-md ring-card">O</span>
                                          </div>
                                          <div class="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Ols Schols
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 3 hours ago
                                            </p>
                                          </div>
                                        </div>
                                        
                                      </div>
                                    </div>
                                  </div>
                                  
                                </div>
                                
                              </div>
                              
                            </div>
                          </div>
                          
                        </div>

<div class="mt-auto py-3 px-4 flex items-center border-t border-card-footer">
                          <span class="flex justify-center items-center gap-x-1 text-sm sm:text-[13px] 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>
                            2
                          </span>

<div class="flex flex-col bg-card border border-card-line rounded-xl truncate">
                        
                        <div class="p-4 relative flex gap-x-3">
                          
                          <div class="shrink-0">
                            <div class="shrink-0 border border-line-2 rounded-xl">
                              <div class="size-12 flex justify-center items-center"><svg class="shrink-0 size-6 text-muted-foreground-1" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7438 0.940745C6.84695 1.30308 2.6841 1.63631 2.48837 1.67533C1.9396 1.77319 1.44038 2.14544 1.20563 2.63537L1 3.06646L1.01982 13.3407L1.04893 23.615L1.36234 24.2517C1.53886 24.6042 2.73365 26.2499 4.0362 27.9439C6.61221 31.2836 6.79802 31.47 7.77726 31.5679C8.06156 31.597 10.1966 31.4991 12.5081 31.3622C14.8295 31.2154 18.5508 30.99 20.7842 30.863C30.3233 30.2839 29.8334 30.3328 30.3815 29.8627C31.0672 29.2947 31.0183 30.2251 31.0474 17.7377C31.0672 7.15003 31.0573 6.45509 30.9006 6.13177C30.7148 5.76943 30.3815 5.51487 26.0329 2.45885C23.1243 0.421704 22.9186 0.313932 21.6155 0.294111C21.0772 0.274911 16.6307 0.568497 11.7438 0.940745ZM22.752 2.28232C23.1633 2.46814 26.1704 4.56412 26.6108 4.9661C26.7284 5.08378 26.7675 5.18164 26.7086 5.24048C26.5717 5.35817 7.96245 6.465 7.42421 6.38634C7.17956 6.34732 6.81722 6.20052 6.61159 6.06302C5.75932 5.48514 3.64413 3.75149 3.64413 3.62452C3.64413 3.29129 3.57538 3.29129 11.8714 2.69421C13.4582 2.58644 16.0633 2.39071 17.6502 2.26312C21.0871 1.98874 22.1159 1.99865 22.752 2.28232ZM28.6677 7.63996C28.8046 7.77685 28.9223 8.04132 28.9613 8.29589C28.9904 8.53125 29.0102 12.9189 28.9904 18.0313C28.9613 26.8067 28.9514 27.3555 28.7848 27.61C28.6869 27.7667 28.4912 27.9333 28.3438 27.9823C27.9331 28.1489 8.43318 29.2557 8.03183 29.138C7.84601 29.0891 7.59083 28.9324 7.45394 28.7955L7.21858 28.541L7.18947 19.0799C7.16965 12.4395 7.18947 9.5012 7.26813 9.23672C7.32697 9.041 7.47376 8.80564 7.60136 8.72759C7.77788 8.60991 8.93364 8.51205 12.9101 8.2773C15.7016 8.1206 20.0206 7.85613 22.4987 7.70933C28.3933 7.34638 28.3741 7.34638 28.6677 7.63996Z" class="fill-foreground" fill="currentColor"/><path d="M23.4277 10.8818C22.3698 10.9506 21.4296 11.0484 21.3218 11.1073C20.9985 11.2739 20.8028 11.5483 20.7638 11.8617C20.7347 12.185 20.8325 12.224 21.8898 12.3516L22.35 12.4104V16.5925C22.35 19.0799 22.311 20.7256 22.2621 20.6767C22.2131 20.6178 20.8226 18.5027 19.167 15.9756C17.512 13.4392 16.1407 11.3525 16.1209 11.3333C16.1011 11.3135 15.024 11.3724 13.7313 11.4609C12.1445 11.5687 11.273 11.6666 11.0965 11.7644C10.8122 11.9112 10.4988 12.4303 10.4988 12.7734C10.4988 12.979 10.871 13.0868 11.6545 13.0868H12.0658V25.1139L11.4 25.3196C10.8809 25.4763 10.7044 25.5741 10.6165 25.7698C10.4598 26.1031 10.4697 26.4066 10.6264 26.4066C10.6852 26.4066 11.792 26.3378 13.0649 26.2598C15.582 26.113 15.8657 26.0442 16.1302 25.5252C16.2088 25.3685 16.277 25.2019 16.277 25.1529C16.277 25.1139 15.9345 24.9962 15.5226 24.8984C15.1014 24.8005 14.6802 24.7027 14.5923 24.6828C14.4257 24.6339 14.4157 24.3304 14.4157 20.1186V15.6033L17.3931 20.2753C20.5173 25.1721 20.9093 25.7308 21.3893 25.9755C21.987 26.2889 23.5051 26.0733 24.2688 25.5741L24.5042 25.4273L24.524 18.7479L24.5531 12.0586L25.0722 11.9608C25.6891 11.8431 25.9734 11.5594 25.9734 11.0695C25.9734 10.7561 25.9536 10.7362 25.66 10.7462C25.4847 10.7542 24.4757 10.813 23.4277 10.8818Z" class="fill-foreground" fill="currentColor"/></svg></div>
                            </div>
                          </div>

<div class="grow truncate mt-1">
                            <div class="pe-7">
                              <span class="block text-sm text-foreground">
                                Notion
                              </span>
                            </div>

<div class="hs-tooltip shrink-0 block">
                              <p class="hs-tooltip-toggle font-medium truncate text-foreground">
                                Add missing plugin demos to Stackblitz (framework guides)
                              </p>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 max-w-48 text-wrap bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Add missing plugin demos to Stackblitz (framework guides)
                              </span>
                            </div>
                          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-28 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpmd2">
                                <div class="p-1 space-y-0.5">
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/><path d="m15 5 3 3"/></svg>
                                    Edit
                                  </button>
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                    Share
                                  </button>
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                    Delete
                                  </button>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>

<div class="py-3 grid grid-cols-3 border-y border-card-divider divide-x divide-card-divider">
                          
                          <div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              9
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              Tasks
                            </p>
                          </div>

<div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              0
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              In Progress
                            </p>
                          </div>

<div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              9
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              Completed
                            </p>
                          </div>
                          
                        </div>

<div class="p-4 flex flex-col gap-y-4">
                          
                          <div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Due date
                            </p>
                            <div class="grow">
                              <p class="font-medium text-sm text-foreground">
                                4 June, 2024
                              </p>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Category
                            </p>
                            <div class="grow">
                              <span class="py-px px-2 inline-flex items-center gap-x-1.5 bg-surface text-sm text-surface-foreground rounded-md">
                                <span class="inline-block w-1 h-3 bg-red-500 rounded-full"></span>
                                UI/UX
                              </span>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Assignee
                            </p>
                            <div class="grow">
                              <div class="flex items-center gap-x-1.5">
                                <img class="shrink-0 size-4 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="assigneeAvatar">
                                <span class="font-medium text-sm text-foreground">Daniel Hobbs</span>
                              </div>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Last edited
                            </p>
                            <div class="grow">
                              <div class="flex items-center gap-x-1.5">
                                <img class="shrink-0 size-4 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="lastEditedAvatar">
                                <span class="font-medium text-sm text-foreground">Daniel Hobbs</span>
                              </div>
                            </div>
                          </div>

<div class="hs-dropdown [--placement:top-right] [--trigger:hover] [--scope:window] relative  inline-flex">
                                  <button id="hs-pro-wpagd2" type="button" class="flex justify-center items-center gap-x-1 text-sm text-muted-foreground-1 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <svg class="sm:hidden shrink-0 size-4" 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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                                    <span class="sm:hidden">+6</span>
                                    <span class="hidden sm:block ms-1.5">+2</span>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-inverse border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpagd2">
                                    <div class="relative hover:z-10 p-3 max-h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track-inverse [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb-inverse">
                                      <span class="block mb-2 text-[11px] uppercase text-muted-foreground">Last seen by</span>

<div class="sm:hidden flex items-center gap-x-2">
                                          <div class="shrink-0">
                                            <img class="shrink-0 size-7 size-4 rounded-md ring-card" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                          </div>
                                          <div class="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Amanda Harvey
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 5 mins ago
                                            </p>
                                          </div>
                                        </div>

<div class="grow truncate mt-1">
                            <div class="pe-7">
                              <span class="block text-sm text-foreground">
                                Dropbox Inc.
                              </span>
                            </div>

<div class="hs-tooltip shrink-0 block">
                              <p class="hs-tooltip-toggle font-medium truncate text-foreground">
                                Datatables integration
                              </p>
                              <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 max-w-48 text-wrap bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                                Datatables integration
                              </span>
                            </div>
                          </div>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-28 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown border border-dropdown-line rounded-xl shadow-xl" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpmd3">
                                <div class="p-1 space-y-0.5">
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M12 20h9"/><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/><path d="m15 5 3 3"/></svg>
                                    Edit
                                  </button>
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
                                    Share
                                  </button>
                                  <button type="button" class="w-full flex items-center gap-x-2 py-1.5 px-2 rounded-lg text-xs text-dropdown-item-foreground hover:bg-dropdown-item-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-dropdown-item-focus">
                                    <svg class="shrink-0 size-3.5" 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
                                    Delete
                                  </button>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>

<div class="py-3 grid grid-cols-3 border-y border-card-divider divide-x divide-card-divider">
                          
                          <div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              101
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              Tasks
                            </p>
                          </div>

<div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              51
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              In Progress
                            </p>
                          </div>

<div class="px-4">
                            <p class="font-semibold text-sm text-foreground">
                              50
                            </p>
                            <p class="text-sm text-muted-foreground-1">
                              Completed
                            </p>
                          </div>
                          
                        </div>

<div class="p-4 flex flex-col gap-y-4">
                          
                          <div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Due date
                            </p>
                            <div class="grow">
                              <p class="font-medium text-sm text-foreground">
                                31 August, 2024
                              </p>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Category
                            </p>
                            <div class="grow">
                              <span class="py-px px-2 inline-flex items-center gap-x-1.5 bg-surface text-sm text-surface-foreground rounded-md">
                                <span class="inline-block w-1 h-3 bg-sky-500 rounded-full"></span>
                                Datatables
                              </span>
                            </div>
                          </div>

<div class="flex items-center gap-x-2">
                            <p class="min-w-20 text-sm text-muted-foreground-1">
                              Last edited
                            </p>
                            <div class="grow">
                              <div class="flex items-center gap-x-1.5">
                                <span class="flex shrink-0 justify-center items-center size-4 bg-purple-200 text-purple-800 dark:bg-purple-800 dark:text-purple-200 text-xs font-medium uppercase rounded-md">
                                  L
                                </span>
                                <span class="font-medium text-sm text-foreground">Liza Harrison</span>
                              </div>
                            </div>
                          </div>

<div class="hs-dropdown [--placement:top-right] [--trigger:hover] [--scope:window] relative  inline-flex">
                                  <button id="hs-pro-wpagd3" type="button" class="flex justify-center items-center gap-x-1 text-sm text-muted-foreground-1 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                    <svg class="sm:hidden shrink-0 size-4" 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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                                    <span class="sm:hidden">+6</span>
                                    <span class="hidden sm:block ms-1.5">+2</span>
                                  </button>

<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 transition-[opacity,margin] duration opacity-0 hidden z-11 bg-dropdown-inverse border border-dropdown-line rounded-xl shadow-lg" role="menu" aria-orientation="vertical" aria-labelledby="hs-pro-wpagd3">
                                    <div class="relative hover:z-10 p-3 max-h-80 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track-inverse [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb-inverse">
                                      <span class="block mb-2 text-[11px] uppercase text-muted-foreground">Last seen by</span>

<div class="sm:hidden flex items-center gap-x-2">
                                          <div class="shrink-0">
                                            <img class="shrink-0 size-7 size-4 rounded-md ring-card" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                          </div>
                                          <div class="grow">
                                            <p class="font-medium text-xs leading-4 text-foreground-inverse">
                                              Amanda Harvey
                                            </p>
                                            <p class="text-[11px] leading-4 text-muted-foreground">
                                              Last seen 5 mins ago
                                            </p>
                                          </div>
                                        </div>

Open related work management page

Project Status Card Grid Pro

Compact status cards reduce each project to a few key metrics and one visible state marker.

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4">
                      
                      <div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="space-y-1">
                          <p class="mb-2.5 font-medium text-sm text-foreground">
                             NexaCore Ventures
                          </p>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               6h 30m
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               3
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Status:
                            </span>
                            
                              <span class="inline-flex items-center gap-x-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-teal-100 text-teal-800 dark:bg-teal-800/30 dark:text-teal-500">Completed</span>
                          </div>
                          
                        </div>
                      </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="space-y-1">
                          <p class="mb-2.5 font-medium text-sm text-foreground">
                             BlueVista Innovations
                          </p>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               -
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               -
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Status:
                            </span>
                            
                              <span class="inline-flex items-center gap-x-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-surface text-surface-foreground">No status</span>
                          </div>
                          
                        </div>
                      </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               8h 26m
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               7
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Status:
                            </span>
                            
                              <span class="inline-flex items-center gap-x-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-sky-100 text-sky-800 dark:bg-sky-800/30 dark:text-sky-500">Active</span>
                          </div>
                          
                        </div>
                      </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               55m
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               2
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Status:
                            </span>
                            
                              <span class="inline-flex items-center gap-x-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-sky-100 text-sky-800 dark:bg-sky-800/30 dark:text-sky-500">Active</span>
                          </div>
                          
                        </div>
                      </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="space-y-1">
                          <p class="mb-2.5 font-medium text-sm text-foreground">
                             StratoSync Enterprises
                          </p>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               9h 12m
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               5
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Status:
                            </span>
                            
                              <span class="inline-flex items-center gap-x-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-sky-100 text-sky-800 dark:bg-sky-800/30 dark:text-sky-500">Active</span>
                          </div>
                          
                        </div>
                      </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               25h 11m
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               9
                            </span>
                          </div>

<div class="p-4 flex flex-col bg-card border border-card-line rounded-xl">
                        <div class="space-y-1">
                          <p class="mb-2.5 font-medium text-sm text-foreground">
                             EchoFlow Technologies
                          </p>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Total hours:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               26m
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Days:
                            </span>
                            <span class="text-sm font-medium text-foreground">
                               1
                            </span>
                          </div>

<div class="flex justify-between items-center gap-x-2">
                            <span class="text-xs text-muted-foreground-2">
                              Status:
                            </span>
                            
                              <span class="inline-flex items-center gap-x-1.5 py-0.5 px-1.5 rounded-md text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800/30 dark:text-yellow-500">On hold</span>
                          </div>
                          
                        </div>
                      </div>
                      
                    </div>

Open related talent details page

Project Shortcut Card Grid Pro

Shortcut cards keep project entries short, with just enough meta to reopen the right one.

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
                      
                      <a class="px-4 py-8 group flex flex-col bg-card border-2 border-dotted border-card-line rounded-xl focus:outline-hidden" href="blank-new-canvas.html">
                        <div class="mb-4 flex flex-col justify-center items-center h-full">
                          <span class="flex justify-center items-center size-14 mx-auto bg-surface text-surface-foreground rounded-xl">
                            <svg class="shrink-0 size-5" 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="M5 12h14"></path><path d="M12 5v14"></path></svg>
                          </span>
                        </div>
                        <div class="text-center mt-auto">
                          <p class="truncate text-sm font-medium text-foreground group-hover:text-primary-hover group-focus:text-primary-focus">
                            New project
                          </p>
                        </div>
                      </a>

<a class="p-2 group flex flex-col bg-card border border-card-line rounded-xl focus:outline-hidden" href="blank-new-canvas.html">
                        <div class="py-8 px-4 bg-surface-1 rounded-lg">
                          <img src="../../../assets/img/pro/files-previews/img1.jpg" alt="Analytics Image">
                        </div>
                        <div class="p-4 pb-2">
                          <p class="truncate text-sm font-medium text-foreground group-hover:text-primary-hover group-focus:text-primary-focus">
                            Analytics
                          </p>
                          <p class="mt-1 text-xs text-muted-foreground-1">
                            Edited a minute ago
                          </p>
                        </div>
                      </a>
                      
                    </div>

Open related AI studio page