Avatars
Below you can find an avatar component styled with tailwindcss.
Avatar with name
- Preview
- HTML
- React
SN
Someone New
Copy
<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>
Copy
<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>Avatar
- Preview
- HTML
- React
SN
Copy
<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>
Copy
<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>