Styling Figure & Figcaption with Tailwind CSS

Last updated on July 26, 2022 Augustus Loading... Post a comment

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:

You can also check out our CSS category page for the latest tutorials and examples.

0 Comments

Inline Feedbacks

View all comments

Styling Figure & Figcaption with Tailwind CSS

You May Also Like