Open demo

CSS code

HTML 
<div class="pf-grid">
  <article class="pf-card">
    <div class="pf-avatar pf-a1" aria-hidden="true">LK</div>
    <h2 class="pf-name">Lena Kovács</h2>
    <p class="pf-role">Product Designer · Berlin</p>
    <ul class="pf-stats">
      <li><b>214</b><span>Shots</span></li>
      <li><b>12.4k</b><span>Followers</span></li>
      <li><b>380</b><span>Following</span></li>
    </ul>
    <div class="pf-actions">
      <button class="pf-btn pf-follow" type="button">Follow<span class="pf-sr"> Lena Kovács</span></button>
      <button class="pf-btn pf-msg" type="button">Message<span class="pf-sr"> Lena Kovács</span></button>
    </div>
  </article>
  <article class="pf-card">
    <div class="pf-avatar pf-a2" aria-hidden="true">RM</div>
    <h2 class="pf-name">Rui Martins</h2>
    <p class="pf-role">Frontend Engineer · Porto</p>
    <ul class="pf-stats">
      <li><b>96</b><span>Repos</span></li>
      <li><b>3.1k</b><span>Followers</span></li>
      <li><b>142</b><span>Following</span></li>
    </ul>
    <div class="pf-actions">
      <button class="pf-btn pf-follow" type="button">Follow<span class="pf-sr"> Rui Martins</span></button>
      <button class="pf-btn pf-msg" type="button">Message<span class="pf-sr"> Rui Martins</span></button>
    </div>
  </article>
</div>
CSS 
/* Profile cards: gradient initials avatar, name, role, three stats and two actions. */
.pf-grid,.pf-grid *,.pf-grid *::before,.pf-grid *::after{box-sizing:border-box}
.pf-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.pf-card{width:280px;background:#fff;border-radius:18px;padding:30px 26px;text-align:center;box-shadow:0 1px 3px rgba(16,24,40,.06),0 16px 40px -14px rgba(16,24,40,.14);transition:transform .18s ease,box-shadow .18s ease}
.pf-card:hover{transform:translateY(-6px);box-shadow:0 1px 3px rgba(16,24,40,.06),0 26px 54px -16px rgba(16,24,40,.22)}
.pf-avatar{width:88px;height:88px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;color:#fff;position:relative}
.pf-avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #e6e9f2}
.pf-a1{background:linear-gradient(135deg,#6366f1,#a855f7)}
.pf-a2{background:linear-gradient(135deg,#0ea5e9,#10b981)}
.pf-name{font-size:1.1rem;letter-spacing:-.01em;color:#101828;margin:0}
.pf-role{font-size:.85rem;color:#667085;margin:4px 0 16px}
.pf-stats{display:flex;justify-content:center;gap:26px;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6;padding:13px 0;margin:0 0 18px;list-style:none}
.pf-stats b{display:block;font-size:1rem;color:#101828}
.pf-stats span{font-size:.72rem;color:#667085;text-transform:uppercase;letter-spacing:.05em}
.pf-actions{display:flex;gap:10px;justify-content:center}
.pf-btn{flex:1;padding:9px 0;border-radius:9px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:filter .15s,background .15s}
.pf-btn:focus-visible{outline:3px solid #6366f1;outline-offset:2px}
.pf-follow{border:0;background:#101828;color:#fff}
.pf-follow:hover{filter:brightness(1.25)}
.pf-msg{border:1px solid #858d9d;background:#fff;color:#101828}
.pf-msg:hover{background:#f4f5f7}
.pf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.pf-card,.pf-btn{transition:none}.pf-card:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="row row-cols-auto justify-content-center g-4">
  <div class="col">
    <article class="card h-100 pf-card">
      <div class="card-body text-center">
        <div class="pf-avatar pf-a1 rounded-circle d-flex align-items-center justify-content-center text-white" aria-hidden="true">LK</div>
        <h2 class="pf-name">Lena Kovács</h2>
        <p class="pf-role">Product Designer · Berlin</p>
        <ul class="pf-stats list-unstyled d-flex justify-content-center">
          <li><b>214</b><span>Shots</span></li>
          <li><b>12.4k</b><span>Followers</span></li>
          <li><b>380</b><span>Following</span></li>
        </ul>
        <div class="d-flex pf-actions">
          <button class="btn btn-dark pf-follow" type="button">Follow<span class="visually-hidden"> Lena Kovács</span></button>
          <button class="btn btn-outline-secondary pf-msg" type="button">Message<span class="visually-hidden"> Lena Kovács</span></button>
        </div>
      </div>
    </article>
  </div>
  <div class="col">
    <article class="card h-100 pf-card">
      <div class="card-body text-center">
        <div class="pf-avatar pf-a2 rounded-circle d-flex align-items-center justify-content-center text-white" aria-hidden="true">RM</div>
        <h2 class="pf-name">Rui Martins</h2>
        <p class="pf-role">Frontend Engineer · Porto</p>
        <ul class="pf-stats list-unstyled d-flex justify-content-center">
          <li><b>96</b><span>Repos</span></li>
          <li><b>3.1k</b><span>Followers</span></li>
          <li><b>142</b><span>Following</span></li>
        </ul>
        <div class="d-flex pf-actions">
          <button class="btn btn-dark pf-follow" type="button">Follow<span class="visually-hidden"> Rui Martins</span></button>
          <button class="btn btn-outline-secondary pf-msg" type="button">Message<span class="visually-hidden"> Rui Martins</span></button>
        </div>
      </div>
    </article>
  </div>
</div>
CSS 
/* Bootstrap .card + .btn, restyled through --bs-card-* and --bs-btn-* variables. */
.pf-card{--bs-card-border-width:0;--bs-card-border-radius:18px;--bs-card-spacer-x:26px;--bs-card-spacer-y:30px;width:280px;
  box-shadow:0 1px 3px rgba(16,24,40,.06),0 16px 40px -14px rgba(16,24,40,.14);transition:transform .18s ease,box-shadow .18s ease}
.pf-card:hover{transform:translateY(-6px);box-shadow:0 1px 3px rgba(16,24,40,.06),0 26px 54px -16px rgba(16,24,40,.22)}
.pf-avatar{width:88px;height:88px;margin:0 auto 16px;font-size:1.7rem;font-weight:800;position:relative}
.pf-avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #e6e9f2}
.pf-a1{background:linear-gradient(135deg,#6366f1,#a855f7)}
.pf-a2{background:linear-gradient(135deg,#0ea5e9,#10b981)}
.pf-name{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;line-height:normal;color:#101828;margin:0}
.pf-role{font-size:.85rem;color:#667085;margin:4px 0 16px}
.pf-stats{gap:26px;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6;padding:13px 0;margin:0 0 18px}
.pf-stats b{display:block;font-size:1rem;color:#101828}
.pf-stats span{font-size:.72rem;color:#667085;text-transform:uppercase;letter-spacing:.05em}
.pf-card .btn{--bs-btn-padding-y:9px;--bs-btn-font-size:.85rem;--bs-btn-font-weight:700;--bs-btn-border-radius:9px;
  --bs-btn-focus-box-shadow:0 0 0 3px #fff,0 0 0 6px #6366f1;flex:1;transition:filter .15s,background .15s}
.pf-card .btn:focus-visible{outline:0}
.pf-actions{gap:10px}
.pf-follow{--bs-btn-bg:#101828;--bs-btn-border-color:#101828;--bs-btn-hover-bg:#101828;--bs-btn-hover-border-color:#101828;--bs-btn-active-bg:#101828}
.pf-follow:hover{filter:brightness(1.25)}
.pf-msg{--bs-btn-color:#101828;--bs-btn-border-color:#858d9d;--bs-btn-hover-color:#101828;--bs-btn-hover-bg:#f4f5f7;--bs-btn-hover-border-color:#858d9d;--bs-btn-active-color:#101828;--bs-btn-active-bg:#f4f5f7;--bs-btn-active-border-color:#858d9d}
@media (prefers-reduced-motion:reduce){.pf-card,.pf-card .btn{transition:none}.pf-card:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex flex-wrap justify-center gap-7">
  <article class="w-[280px] rounded-[18px] bg-white px-[26px] py-[30px] text-center shadow-[0_1px_3px_rgba(16,24,40,.06),0_16px_40px_-14px_rgba(16,24,40,.14)] transition-[translate,box-shadow] duration-[180ms] ease-in-out hover:-translate-y-1.5 hover:shadow-[0_1px_3px_rgba(16,24,40,.06),0_26px_54px_-16px_rgba(16,24,40,.22)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <div aria-hidden="true" class="relative mx-auto mb-4 flex size-[88px] items-center justify-center rounded-full bg-linear-135 from-[#6366f1] to-[#a855f7] text-[1.7rem] font-extrabold text-white after:absolute after:-inset-[5px] after:rounded-full after:border-2 after:border-[#e6e9f2]">LK</div>
    <h2 class="text-[1.1rem] font-bold tracking-[-.01em] text-[#101828]">Lena Kovács</h2>
    <p class="mt-1 mb-4 text-[.85rem] text-[#667085]">Product Designer · Berlin</p>
    <ul class="mb-[18px] flex justify-center gap-[26px] border-y border-[#eef1f6] py-[13px]">
      <li><b class="block text-base text-[#101828]">214</b><span class="text-[.72rem] tracking-[.05em] text-[#667085] uppercase">Shots</span></li>
      <li><b class="block text-base text-[#101828]">12.4k</b><span class="text-[.72rem] tracking-[.05em] text-[#667085] uppercase">Followers</span></li>
      <li><b class="block text-base text-[#101828]">380</b><span class="text-[.72rem] tracking-[.05em] text-[#667085] uppercase">Following</span></li>
    </ul>
    <div class="flex justify-center gap-2.5">
      <button type="button" class="flex-1 cursor-pointer rounded-[9px] bg-[#101828] py-[9px] text-[.85rem] font-bold text-white transition-[filter,background-color] duration-150 hover:brightness-125 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#6366f1] motion-reduce:transition-none">Follow<span class="sr-only"> Lena Kovács</span></button>
      <button type="button" class="flex-1 cursor-pointer rounded-[9px] border border-[#858d9d] bg-white py-[9px] text-[.85rem] font-bold text-[#101828] transition-[filter,background-color] duration-150 hover:bg-[#f4f5f7] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#6366f1] motion-reduce:transition-none">Message<span class="sr-only"> Lena Kovács</span></button>
    </div>
  </article>
  <article class="w-[280px] rounded-[18px] bg-white px-[26px] py-[30px] text-center shadow-[0_1px_3px_rgba(16,24,40,.06),0_16px_40px_-14px_rgba(16,24,40,.14)] transition-[translate,box-shadow] duration-[180ms] ease-in-out hover:-translate-y-1.5 hover:shadow-[0_1px_3px_rgba(16,24,40,.06),0_26px_54px_-16px_rgba(16,24,40,.22)] motion-reduce:transition-none motion-reduce:hover:translate-y-0">
    <div aria-hidden="true" class="relative mx-auto mb-4 flex size-[88px] items-center justify-center rounded-full bg-linear-135 from-[#0ea5e9] to-[#10b981] text-[1.7rem] font-extrabold text-white after:absolute after:-inset-[5px] after:rounded-full after:border-2 after:border-[#e6e9f2]">RM</div>
    <h2 class="text-[1.1rem] font-bold tracking-[-.01em] text-[#101828]">Rui Martins</h2>
    <p class="mt-1 mb-4 text-[.85rem] text-[#667085]">Frontend Engineer · Porto</p>
    <ul class="mb-[18px] flex justify-center gap-[26px] border-y border-[#eef1f6] py-[13px]">
      <li><b class="block text-base text-[#101828]">96</b><span class="text-[.72rem] tracking-[.05em] text-[#667085] uppercase">Repos</span></li>
      <li><b class="block text-base text-[#101828]">3.1k</b><span class="text-[.72rem] tracking-[.05em] text-[#667085] uppercase">Followers</span></li>
      <li><b class="block text-base text-[#101828]">142</b><span class="text-[.72rem] tracking-[.05em] text-[#667085] uppercase">Following</span></li>
    </ul>
    <div class="flex justify-center gap-2.5">
      <button type="button" class="flex-1 cursor-pointer rounded-[9px] bg-[#101828] py-[9px] text-[.85rem] font-bold text-white transition-[filter,background-color] duration-150 hover:brightness-125 focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#6366f1] motion-reduce:transition-none">Follow<span class="sr-only"> Rui Martins</span></button>
      <button type="button" class="flex-1 cursor-pointer rounded-[9px] border border-[#858d9d] bg-white py-[9px] text-[.85rem] font-bold text-[#101828] transition-[filter,background-color] duration-150 hover:bg-[#f4f5f7] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#6366f1] motion-reduce:transition-none">Message<span class="sr-only"> Rui Martins</span></button>
    </div>
  </article>
</div>

About this set

Two team or creator profile cards: a round gradient avatar with the person’s initials inside a thin ring, their name and role, a row of three stats and a pair of actions, a solid Follow button and an outlined Message button. The first card shows a designer with shots, followers and following; the second shows an engineer with repos in place of shots. Use them on team pages, community member lists, author boxes or a social app’s people directory. The stats are a real list and the avatar initials are hidden from screen readers because the name follows as a heading. Each button carries the person’s name as visually hidden text, so a page with many cards still has distinct Follow and Message buttons. The card lifts a few pixels with a deeper shadow on hover. The buttons have no behaviour attached, so wire them to your own follow and messaging logic. The Bootstrap version is a .card with .btn-dark and .btn-outline-secondary recoloured through –bs-btn-* variables, and the Tailwind version is utility classes only.

What’s included

  • Gradient initials avatar with an outer ring drawn by ::after
  • Three stats in a bordered row, marked up as a list
  • Follow and Message buttons named per person with visually hidden text
  • Hover lift that switches off under prefers-reduced-motion
  • No JavaScript

Accessibility

Each card is an article with the person's name as its heading; the decorative initials are aria-hidden. The Follow and Message buttons include the person's name as visually hidden text, and both show a 3px indigo focus ring. The hover lift and button transitions are turned off under prefers-reduced-motion.

Customise it

Change the avatar gradients in .pf-a1 and .pf-a2 and the button colours in .pf-follow and .pf-msg. In Bootstrap the same colours are --bs-btn-bg and --bs-btn-border-color on .pf-follow and .pf-msg; in Tailwind edit the from-/to- and bg- utilities on the avatar and buttons.