Profile Hover Card

<div class="nuda-hover">
  <button class="nuda-hover__trigger" type="button">@iv_solis</button>
  <div class="nuda-hover__card" role="tooltip">
    <div class="nuda-hover__cover"></div>
    <div class="nuda-hover__head">
      <div class="nuda-hover__avatar">IS</div>
      <button class="nuda-hover__follow" type="button">Follow</button>
    </div>
    <div class="nuda-hover__name">Iv Solis</div>
    <div class="nuda-hover__bio">Frontend engineer · Berlin · coffee enjoyer</div>
    <div class="nuda-hover__stats">
      <span><strong>2,341</strong> Followers</span>
      <span><strong>184</strong> Following</span>
    </div>
  </div>
</div>

.nuda-hover {
  position: relative;
  display: inline-block;
  font-family: system-ui,sans-serif;
}

.nuda-hover__trigger {
  padding: 0;
  background: none;
  border: 0;
  color: #62b6ff;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nuda-hover__card {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 260px;
  padding: 0 14px 14px;
  background: #111114;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  opacity: 0;
  transform: translateY(-4px) scale(.97);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity .22s ease,transform .22s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.6);
  z-index: 2;
  color: #fafafa;
}

.nuda-hover:hover .nuda-hover__card,.nuda-hover:focus-within .nuda-hover__card {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nuda-hover__cover {
  height: 46px;
  margin: 0 -14px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(135deg,#62b6ff,#9d6dff,#ff6dd4);
}

.nuda-hover__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -22px;
  margin-bottom: 6px;
}

.nuda-hover__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 700;
  color: #09090b;
  background: linear-gradient(135deg,#e4ff54,#6ee7b7);
  border: 3px solid #111114;
}

.nuda-hover__follow {
  padding: 5px 12px;
  background: #e4ff54;
  color: #09090b;
  border: 0;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

.nuda-hover__name {
  font-size: .95rem;
  font-weight: 600;
}

.nuda-hover__bio {
  font-size: .78rem;
  color: #a0a0a8;
  line-height: 1.4;
  margin-top: 2px;
}

.nuda-hover__stats {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: .75rem;
  color: #a0a0a8;
}

.nuda-hover__stats strong {
  color: #fafafa;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-hover__card {
    transition: opacity .2s;
  }
  .nuda-hover:hover .nuda-hover__card {
    transform: none;
  }
}