Avatars

<!-- Component: Rounded base sized basic text avatar -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
</a>
<!-- End Rounded base sized basic text avatar -->

<!-- Component: Rounded base sized text avatar with borders -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white border-2 border-white rounded bg-emerald-500">
  CP
</a>
<!-- End Rounded base sized text avatar with borders -->

<!-- Component: Rounded base sized text avatar with top right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute -top-2.5 -right-2.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right badge -->

<!-- Component: Rounded base sized text avatar with bottom right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute -bottom-2 -right-2 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right badge -->

<!-- Component: Rounded base sized text avatar with top right indicator badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute inline-flex items-center justify-center gap-1 p-1 text-sm text-white bg-pink-500 border-2 border-white rounded-full -top-1 -right-1">
    <span class="sr-only"> 7 new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right indicator badge -->

<!-- Component: Rounded base sized text avatar with bottom right indicator badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute inline-flex items-center justify-center gap-1 p-1 text-sm text-white bg-pink-500 border-2 border-white rounded-full -bottom-1 -right-1">
    <span class="sr-only"> 7 new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right indicator badge -->

<!-- Component: Rounded base sized text avatar with tooltips -->
<span class="relative overflow-hidden cursor-pointer group hover:overflow-visible" aria-describedby="tooltip-05">
  <!-- Start Tooltip trigger -->
  <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500 ">
    CP
  </a>
  <!-- End Tooltip trigger -->
  <span role="tooltip" id="tooltip-05" class="invisible absolute bottom-full left-1/2 z-10 mb-2 w-[89px] -translate-x-1/2 rounded bg-slate-700 p-2 text-xs text-white opacity-0 transition-all before:invisible before:absolute before:left-1/2 before:top-full before:z-10 before:mb-2 before:-ml-1 before:border-x-4 before:border-t-4 before:border-x-transparent before:border-t-slate-700 before:opacity-0 before:transition-all before:content-[''] group-hover:visible group-hover:block group-hover:opacity-100 group-hover:before:visible group-hover:before:opacity-100">
    User's Name
  </span>
</span>
<!-- End Rounded base sized text avatar with tooltips -->

<!-- Component: Rounded full base sized basic text avatar -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500"> CP </a>
<!-- End Rounded base sized basic text avatar -->

<!-- Component: Rounded full base sized text avatar with borders -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white border-2 border-white rounded-full bg-emerald-500"> CP </a>
<!-- End Rounded base sized text avatar with borders -->

<!-- Component: Rounded full base sized text avatar with top right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
  CP
  <span class="absolute -top-1.5 -right-1.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right badge -->

<!-- Component: Rounded full base sized text avatar with bottom right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
  CP
  <span class="absolute -bottom-1.5 -right-1.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right badge -->