How to set border bottom except the bottom sets using react, and css

Question

I have to set border to every row except last row like one on image below

In this image, there are 8 cards i have arranged on grid, but it also needs to be responsive and the number of cards can vary depends on the API, Below is the code I have tried

    <div className="col-span-12 border mt-5 border-[#00B2EC] rounded-2xl">
      <div className="grid lg:grid-cols-5 md:grid-cols-3 grid-cols-1">
        {Object.entries(BudgetData[0]).map(([key, value]) => {
          return (
            <div key={key} className="flex flex-col justify-start items-start p-4 gap-4 border-b border-[#E8ECEE] lg:last-5-child:border-0 md:last-3-child:border-0 sm:last-1-child:border-0">
              <span className="text-[#153171]">{key}</span>
              <span className="font-semibold text-[#454545">{value}</span>
            </div>
          );
        })}
      </div>
    </div>

used tailwind, Also have added the tailwind config js below

const plugin = require('tailwindcss/plugin');

export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [
    plugin(({ addVariant }) => {
      addVariant('last-5-child', '&:nth-last-child(-n + 5)');
      addVariant('last-3-child', '&:nth-last-child(-n + 3)');
      addVariant('last-1-child', '&:nth-last-child(-n + 1)');
    })
  ]
};