Next.jsとTailwind CSSで画像に文字を重ねる

yarn create next-app --experimental-app

@tailwind base;
@tailwind components;
@tailwind utilities;

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "placekitten.com",
      },
    ],
  },
};

module.exports = nextConfig;

import Image from "next/image";

export default function Home() {
  return (
    <main className="flex p-2">
      <div className="relative">
        <Image
          alt="image"
          src="https://placekitten.com/200/250"
          width={200}
          height={250}
          className="rounded-2xl"
        />
        <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-b from-transparent to-black rounded-b-2xl">
          <p className="text-white absolute left-4 bottom-2">Cat</p>
        </div>
      </div>
    </main>
  );
}