Skip to Content

Avatars

Below you can find an avatar component styled with tailwindcss.

Preview - Avatar with name

SN

Someone New

HTML
<div class="flex flex-row items-center min-w-fit h-auto h-[24px] h-auto">
	<div class="rounded-full overflow-hidden bg-white flex justify-center items-center mr-1 w-[24px] h-[24px]">
		<span class="text-neutral-600 text-xxxs">SN</span>
	</div>
	<h4 class="text-xxs font-normal text-neutral-600 dark:text-white">Someone New</h4>
</div>
React
<div className="flex flex-row items-center min-w-fit h-auto h-[24px] h-auto">
	<div className="rounded-full overflow-hidden bg-white flex justify-center items-center mr-1 w-[24px] h-[24px]">
		<span className="text-neutral-600 text-xxxs">SN</span>
	</div>
	<h4 className="text-xxs font-normal text-neutral-600 dark:text-white">Someone New</h4>
</div>

Preview - Avatar

SN
HTML
<div class="flex flex-row items-center min-w-fit h-auto h-[32px] h-auto">
	<div class="rounded-full overflow-hidden bg-white flex justify-center items-center w-[32px] h-[32px]">
		<span class="text-neutral-600 text-xs">SN</span>
	</div>
</div>
React
<div className="flex flex-row items-center min-w-fit h-auto h-[32px] h-auto">
	<div className="rounded-full overflow-hidden bg-white flex justify-center items-center w-[32px] h-[32px]">
		<span className="text-neutral-600 text-xs">SN</span>
	</div>
</div>