tailwind react nextjs 吹き出し（ChatBuble/Speech Bubble）の作り方

1import Image from "next/image";
2
3<div>
4      <div className="flex items-end">
5        <div className="flex justify-center bg-[#798777]  rounded-full border-2 border-black w-24 h-24 mb-5">
6          <Image
7            src="/ローカルに配置したアイコンの画像" //配置した画像のパスを記述する。
8            alt="Profile Image"
9            width={85}
10           height={85}
11            style={{
12              objectFit: "contain",
13              borderRadius: "60px",
14            }}
15          />
16        </div>
17        <div className="relative m-8 max-w-96 min-w-72 rounded-lg bg-[#798777] border-black border-2 p-5 text-white text-center text-lg ">
18          吹き出し内に表示したい文字列
19          <div className=" absolute z-10 left-[10.5px]">
20            <div className="rounded-sm before:absolute before:-bottom-2.5 before:-left-5 before:h-4 before:w-4 before:-rotate-45 before:transform before:border-l-2 before:border-t-2 before:border-black before:bg-[#798777]"></div>
21          </div>
22        </div>
23      </div>
24</div>