Avatar Using Name Initials in React and TailwindCSS

avatar-initial-names.tsx

## Avatar Component
  
import { FC } from "react";

interface IAvatarInitials {
  name: string;
}
export const AvatarInitials: FC<IAvatarInitials> = ({ name }) => {
  const userName = name.split(" ");

  return (
    <div className="table h-8 w-8 bg-black text-white rounded-full">
      <span className="table-cell align-middle text-center">
        <h1 className="m-0 p-0 font-medium tracking-wide uppercase">
          {`${
            userName.length >= 2
              ? `${userName[0].charAt(0)}${userName[1].charAt(0)}`
              : userName[0].charAt(0)
          }`}
        </h1>
      </span>
    </div>
  );
};

## USAGE

<AvatarInitials name="Dipesh KC"/>