In HTML, the <figure> tag is used to mark up an image while the <figcaption> tag (nests inside <figure>) displays the caption that describes the associated image. The following examples show you how to style figure and figcaption elements by using Tailwind CSS.
Example 1
This example places the captions below the images.
Screenshot:
The code:
<body class="bg-amber-100">
<div class="p-20 flex justify-start items-start space-x-20">
<figure class="w-96 bg-white rounded-lg drop-shadow-lg">
<img class="w-full object-cover rounded-tl-lg rounded-tr-lg"
src="https://www.kindacode.com/wp-content/uploads/2022/07/bottle.jpeg" />
<figcaption class="px-5 py-3 text-center text-lg font-semibold">This is a bottle</figcaption>
</figure>
<figure class="w-96 px-5 pt-5 pb-2 bg-gray-800 rounded-lg drop-shadow-xl">
<img class="w-full object-cover rounded-tl-lg rounded-tr-lg"
src="https://www.kindacode.com/wp-content/uploads/2022/07/oranges.png" />
<figcaption class="px-5 py-3 text-center text-lg text-white font-semibold">Do you like oranges?</figcaption>
</figure>
</div>
</body>Example 2
This example displays a caption over an image. The trick here is to add the relative utility to the figure element and add the absolute utility to the figcaption element.
Screenshot:
The code:
<body class="px-20 py-10">
<figure class="w-[600px] relative rounded-md drop-shadow-lg">
<img class="w-full object-cover rounded-tl-md rounded-tr-md"
src="https://www.kindacode.com/wp-content/uploads/2022/07/flower-1.jpeg" />
<figcaption class="absolute bottom-0 z-90 w-3/4 bg-black/50 px-5 py-2 text-white">
<h1 class="text-xl font-bold">This is the title</h1>
<p class="mt-1 italic text-sm font-light">This is the subtitle. Some dummy text. Some dummy text...</p>
</figcaption>
</figure>
</body>Further reading:
- Tailwind CSS: Grid examples (with explanations)
- Tailwind CSS: How to Create a Mega Menu
- Tailwind CSS: How to Create a Full-Screen Overlay Menu
- Tailwind CSS: How to Create an Off-Canvas Side Menu
- Tailwind CSS: How to Center a Fixed Element
- Tailwind CSS: Create a Responsive Navbar with a Search Box
You can also check out our CSS category page for the latest tutorials and examples.
