Profile Card

<div class="profile-card">
  <div class="avatar-wrap">
    <div class="avatar">S</div>
    <img src="https://cdn.freeflags.org/flat-circle/japan-flag-flat-circle-64.png"
         width="28" height="28" alt="JP flag"
         class="flag-badge" />
  </div>
  <h3>Sakura Tanaka</h3>
  <p>Designer</p>
  <span class="country-tag">JP</span>
</div>

.profile-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 24px; border: 1px solid #dce4ef;
  border-radius: 12px; background: white; width: 200px;
}

.avatar-wrap { position: relative; margin-bottom: 14px; }

.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: #eef5ff; color: #1764d7;
  display: grid; place-items: center;
  font-size: 24px; font-weight: 800;
}

.flag-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid white;
}

.country-tag {
  margin-top: 8px; padding: 4px 10px;
  border-radius: 999px; background: #f5f8fc;
  font-size: 12px; font-weight: 800; color: #657287;
}