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're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Figures

Tailwind CSS Figures

Basic examples

Access restricted

To view this section you must have an active PRO account

Figures

Tailwind CSS Figures

Basic examples

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):