List Koi - Copy this React, Tailwind Component to your project

<div className="container mx auto flex justify center space x 6"> {/* Fish 1 */} {ListKoi.map((koi) => ( <> <div className="flex flex col items center space y 3"> <div className="relative"> <img src={koi.img} alt="Koi Fish 1" className="w 56" /> </div> <div className="text center"> <p className="text lg">{koi.nameJapan}</p> <p className="text sm">{koi.name}</p> </div> </div> </> ))} </div>I want each Koi to have a rectangle as a background, the Japanese text in the upper right corner, and the phonetic text vertically in the lower left corner.