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

        
            
      <div class="flex justify-center">
        <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>
      </div>

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

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

HTML

        
            
      <div class="flex justify-center">
        <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>
      </div>

Hey there 👋 we want to make Tailwind 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

If you are looking for more advanced options, try Bootstrap Images from MDBootstrap.

Figures

Basic examples

Related resources