番号が固定幅で右寄せされ、横に項目名が並ぶリストをGridで作る

const items = [
  'apple',
  'orange',
  'banana',
  'grape',
  'lemon',
  'melon',
  'strawberry',
  'peach',
  'pear',
  'cherry',
  'watermelon',
  'pineapple',
];

export default function NumberedList() {
  return (
    <div className="grid gap-0 border w-1/2 m-4">
      {items.map((item, i) => (
        <div
          key={i}
          className="col-span-500 grid grid-cols-subgrid gap-2 border-b py-1 px-2 last:border-b-0"
        >
          <div className="tabular-nums text-right">{i + 1}</div>
          <div>{item}</div>
        </div>
      ))}
    </div>
  );
}