How to apply linear gradient in the image using tailwind,
I tried two version of this code but its not working
This one not working:
<div>
<img src={BannerImage} alt="BannerImage" className="h-[70vh] lg:h-[80vh] w-full object-cover object-right bg-gradient-to-r from-cyan-500 to-blue-500" />
</div>
This one also not working:
<div className="bg-gradient-to-r from-cyan-500 to-blue-500">
<img src={BannerImage} alt="BannerImage" className="h-[70vh] lg:h-[80vh] w-full object-cover object-right" />
</div>
The closest I can achieve is this ,
<div class="relative">
<img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="BannerImage" class="absolute h-[70vh] lg:h-[80vh] w-full object-cover object-right opacity-30 " />
<div class="absolute -z-10 bg-gradient-to-t from-white via-black to-black h-[70vh] lg:h-[80vh] w-full" />
</div>
Refer this https://play.tailwindcss.com/fq9cdlFfCt