Tailwind CSS Figures

Responsive figures built with Tailwind CSS. Documentation and examples for displaying related images and text with the figure component. Download for free without registration.

Basic examples

Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.

Taking up Water with a Spoon — A caption for the above image.

HTML

        
            
      <figure class="mb-4 inline-block max-w-sm">
        <img
          src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
          class="mb-4 h-auto max-w-full rounded-lg align-middle leading-none shadow-lg"
          alt="Taking up Water with a Spoon" />
        <figcaption class="text-sm text-neutral-600 dark:text-neutral-400">
          A caption for the above image.
        </figcaption>
      </figure>

Aligning the figure's caption is easy with our text utilities.

Hollywood Sign on The Hill — A caption for the above image.

HTML

        
            
      <figure class="mb-4 inline-block max-w-sm">
        <img
          src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
          class="mb-4 h-auto max-w-full rounded-lg align-middle leading-none shadow-lg"
          alt="Hollywood Sign on The Hill" />
        <figcaption
          class="text-right text-sm text-neutral-600 dark:text-neutral-400">
          A caption for the above image.
        </figcaption>
      </figure>

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Figures

Tailwind CSS Figures

Basic examples

Related resources

Tutorials:

Extended Docs:

Design System (Figma):