Responsive stats preview card component using tailwind grid and flex

In the code I have added two ways to add colour overlay over image.

One method is to add an image inside a div which has a background colour of purple/blue variant provided. The image has a reduced opacity because of which we can see the background purple colour.

Another method is to use gradients and background image on a div. This needs lot less CSS.

Finally I commented the method with linear gradient and background image (though in most cases this is the preferred method while adding a header image with a colour overlay).

Yet another method to add a colour overlay is to add image as a background to a div and then have another div absolutely positioned wrt to the one with the background image. The second div will be of the same dimensions as the div with a background image and have a color and reduced opacity applied to it. (I did not use this method)

Link for color overlay for background image and another link for the same.

Any feedback on this challenge is welcome.