Styles for specific component loading after render

// biography.tsx
import "./styles.css";

export function Biography({ content }: { content: string }) {
  return (
    <div
      className="hover:cursor-pointer hover:bg-card active:bg-gray-200 fade-container w-full max-w-full overflow-hidden rounded-xl px-5 pt-5 cursor-pointer"
      tabIndex={0}
    >
      <div className="content-wrapper flex flex-col gap-2">
        <div className="flex items-center justify-between">
          <div className="font-semibold text-card-foreground">Biography</div>
          <svg
            className="h-4 w-4 opacity-60"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              fill-rule="evenodd"
              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </div>
        <div className="text-fade h-24 overflow-hidden font-serif">
          {content}
        </div>
      </div>
    </div>
  );
}