In this section we will see tailwind overlay image, tailwind v3 overlay card, header overlay example with Tailwind CSS.
How to install & setup Tailwind CSS v3
Example 1
Simple overlay image on text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tailwindcss overlay image</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-full lg:w-1/3">
<div
class='bg-[url("https://cdn.pixabay.com/photo/2018/12/06/16/12/bird-3860034__340.jpg")] object-cover h-96 w-full bg-cover bg-center text-center'>
<h2 class="text-3xl text-white">This is Overlay Image</h2>
</div>
</div>
</body>
</html>
tailwind css overlay text on image
Example 2
Tailwind v3 overlay card image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tailwindcss overlay image card</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="w-full lg:w-1/3">
<div class='bg-[url("https://cdn.pixabay.com/photo/2018/12/06/16/12/bird-3860034__340.jpg")] object-cover h-80 w-full bg-cover bg-center p-12'>
<h2 class="text-2xl text-purple-600">Tailwind CSS Overlay Image Card</h2>
<p class="mb-8 text-gray-800">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo reiciendis, consectetur ea eveniet quas iste aliquid nulla sed totam non aliquam at sit nesciunt, tempora doloribus eius earum odit doloremque.</p>
<button class="px-4 py-2 text-purple-100 bg-purple-600 rounded">Read more</button>
</div>
</div>
</body>
</html>
tailwindcss overlay image card
Tailwind v3 header hero section image overlay.
<div
class='bg-[url("https://cdn.pixabay.com/photo/2018/08/19/07/05/background-3616101__340.jpg")] h-96 w-full object-fill py-32 px-20'>
<h1 class="text-3xl font-bold text-white">This is image Overlay header</h1>
<p class="text-lg text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, minus nihil rem
incidunt aspernatur eum veniam exercitationem corporis error corrupti. Laudantium harum rerum dignissimos?
Repudiandae aspernatur nam sit voluptatibus ipsa?</p>
</div>
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS v3 Button Examples
Tailwind CSS v3 Cards Examples