Tailwind CSS Contact Cards Blocks

Contact Cards

Contact card patterns for compact profile grids, selection cards, and detailed member list layouts.

Mini Contact Card Grid with Avatar Badges Pro

Compact contact grid arranges centered profile cards with avatar badges and short secondary labels.

<div class="grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-3">
                      
                      <a class="py-4 px-3 flex flex-col items-center gap-x-3 bg-layer border border-layer-line rounded-2xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" href="#">
                        <span class="mb-3 shrink-0 relative">
                          <img class="shrink-0 size-11 rounded-full" src="https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">

<div class="text-center">
                          <p class="font-medium text-foreground">
                            Isabella Cruz
                          </p>

<p class="text-[13px] text-muted-foreground-1">
                            Preline account
                          </p>
                        </div>
                      </a>

<a class="py-4 px-3 flex flex-col items-center gap-x-3 bg-layer border border-layer-line rounded-2xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" href="#">
                        <span class="mb-3 shrink-0 relative">
                          <span class="flex shrink-0 justify-center items-center size-11 uppercase bg-indigo-500 text-foreground-inverse rounded-full">M</span>

<p class="text-[13px] text-muted-foreground-1">
                            USD account ending in 5604
                          </p>
                        </div>
                      </a>

<a class="py-4 px-3 flex flex-col items-center gap-x-3 bg-layer border border-layer-line rounded-2xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus" href="#">
                        <span class="mb-3 shrink-0 relative">
                          <img class="shrink-0 size-11 rounded-full" src="https://images.unsplash.com/photo-1570654639102-bdd95efeca7a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">

<div class="text-center">
                          <p class="font-medium text-foreground">
                            Anna Richard
                          </p>

<p class="text-[13px] text-muted-foreground-1">
                            Preline account
                          </p>
                        </div>
                      </a>
                      
                    </div>

Open related send recipient template

Contact Selection Cards with Avatar and Icon States Pro

Three-card selection row mixes avatar and icon tiles for self, person, and company contact choices.

<div class="grid grid-cols-3 gap-2 sm:gap-3">
                      
                      <a class="py-4 px-2 sm:py-6 sm:px-4 w-full group text-center bg-layer border border-layer-line rounded-2xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" href="../../../templates/payments/payments-dashboard/send-to-myself.html">
                        <span class="mx-auto mb-2 size-8 sm:size-10 flex shrink-0 justify-center items-center">
                          <img class="shrink-0 size-8 sm:size-10 rounded-full" src="https://images.unsplash.com/photo-1724037231939-c4fa9bd69a84?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                        </span>
                        <span class="block mb-1 font-medium text-xs sm:text-sm text-foreground">
                          Myself
                        </span>
                      </a>

<a class="py-4 px-2 sm:py-6 sm:px-4 w-full group text-center bg-layer border border-layer-line rounded-2xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" href="../../../templates/payments/payments-dashboard/send-to-someone-else.html">
                        <span class="mx-auto mb-2 size-8 sm:size-10 flex shrink-0 justify-center items-center bg-surface rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                          <svg class="shrink-0 size-4 sm:size-5 text-foreground" 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"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                        </span>
                        <span class="block mb-1 font-medium text-xs sm:text-sm text-foreground">
                          Someone else
                        </span>
                      </a>

<a class="py-4 px-2 sm:py-6 sm:px-4 w-full group text-center bg-layer border border-layer-line rounded-2xl hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" href="../../../templates/payments/payments-dashboard/send-to-someone-else.html">
                        <span class="mx-auto mb-2 size-8 sm:size-10 flex shrink-0 justify-center items-center bg-surface rounded-full group-hover:bg-surface-hover group-focus:bg-surface-focus">
                          <svg class="shrink-0 size-4 sm:size-5 text-foreground" 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 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path><rect width="20" height="14" x="2" y="6" rx="2"></rect></svg>
                        </span>
                        <span class="block mb-1 font-medium text-xs sm:text-sm text-foreground">
                          Company
                        </span>
                      </a>
                      
                    </div>

Open related send method template

Contact Card List with Profile Details Pro

Two-column contact list stacks profile cards with avatar, role, phone number, email address, and status badge.

<div class="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
                      
                      <a class="p-4 flex gap-x-3 bg-card rounded-xl border border-card-line hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/productivity/work-management/talent-details.html">
                        <div class="shrink-0">
                          <div class="relative shrink-0">
                            <img class="shrink-0 size-12 rounded-xl" 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 class="absolute -bottom-2 inset-x-0 text-center">
                              <span class="py-px px-1.5 inline-flex items-center gap-x-1 text-[11px] font-medium uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                            </div>
                          </div>
                        </div>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Amanda Harvey
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Front-End Developer
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              (892) 312-5483
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              amanda@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Daniel Hobbs
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Mobile Developer
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              +1 000-00-00
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              bob@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Liza Harrison
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Illustrator
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              +33 000-00-00
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              liza@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<a class="p-4 flex gap-x-3 bg-card rounded-xl border border-card-line hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/productivity/work-management/talent-details.html">
                        <div class="shrink-0">
                          <div class="relative shrink-0">
                            <img class="shrink-0 size-12 rounded-xl" 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="absolute -bottom-2 inset-x-0 text-center">
                              <span class="py-px px-1.5 inline-flex items-center gap-x-1 text-[11px] font-medium uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                            </div>
                          </div>
                        </div>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Anna Richard
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Marketing
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              anna@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<a class="p-4 flex gap-x-3 bg-card rounded-xl border border-card-line hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/productivity/work-management/talent-details.html">
                        <div class="shrink-0">
                          <div class="relative shrink-0">
                            <img class="shrink-0 size-12 rounded-xl" src="https://images.unsplash.com/photo-1679412330254-90cb240038c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2.5&w=320&h=320&q=80" alt="Avatar">
                            <div class="absolute -bottom-2 inset-x-0 text-center">
                              <span class="py-px px-1.5 inline-flex items-center gap-x-1 text-[11px] font-medium uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                            </div>
                          </div>
                        </div>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Lewis Clarke
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Full-Stack Developer
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              lewis@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Ella Lauda
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Brand Designer
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              +1 212-00-11
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              ella@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Rachel Doe
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Full-Stack Developer
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              +297 000-00-00
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              rachel@email.com
                            </li>
                          </ul>
                        </div>
                      </a>

<a class="p-4 flex gap-x-3 bg-card rounded-xl border border-card-line hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="../../../templates/productivity/work-management/talent-details.html">
                        <div class="shrink-0">
                          <div class="relative shrink-0">
                            <span class="flex shrink-0 justify-center items-center size-12 bg-purple-200 text-purple-800 dark:bg-purple-800 dark:text-purple-200 text-2xl font-medium uppercase rounded-xl">
                              O
                            </span>
                            <div class="absolute -bottom-2 inset-x-0 text-center">
                              <span class="py-px px-1.5 inline-flex items-center gap-x-1 text-[11px] font-medium uppercase rounded-md bg-linear-to-tr from-lime-500 to-teal-500 text-foreground-inverse">Pro</span>
                            </div>
                          </div>
                        </div>

<div class="grow">
                          <h2 class="font-medium text-foreground">
                            Ols Schols
                          </h2>
                          <ul class="text-sm text-muted-foreground-1">
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              Web Designer
                            </li>
                            <li class="inline-block relative pe-3 last:pe-0 last-of-type:before:hidden before:absolute before:top-1/2 before:inset-e-1 before:-translate-y-1/2 before:h-2.5 before:border-s before:border-line-4 before:rounded-full">
                              ols@email.com
                            </li>
                          </ul>
                        </div>
                      </a>
                      
                    </div>

Open related work management template