Tailwindcss background linear gradient image

tailwidncss-background-linear-gradient.jsx

/**
* Tailwindcss background linear gradient image
* "tailwindcss": "^3.1.8"
* dalthonmh
*/
function MyCard({ grupo }) {
  const { number, name, numberOfPrograms, image, color } = grupo;
  return (
    <div
      className="w-full h-96 bg-no-repeat bg-cover relative rounded-lg"
      style={{
        backgroundImage: `linear-gradient(0deg, rgba(0,0,0,0.8), rgba(255,255,255,0.2)), url('${image}')`,
      }}
    >
      <div className="h-full w-full text-white">
        <div className="absolute bottom-4 ml-4 text-left">
          <div
            className="w-24 text-center text-white text-sm mb-2"
            style={{ backgroundColor: color }}
          >
            {`GRUPO ${number}`}
          </div>
          <p className="text-white">{name}</p>
          <p className="text-gray-300">{numberOfPrograms}</p>
        </div>
      </div>
    </div>
  );
}

export default MyCard;