Tailwind CSS React Figures - Free Examples & Tutorial

Responsive figures built with Tailwind CSS React. 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.

        
             
      import React from 'react'; 
      
      export default function App() { 
        return (
          <figure className="mb-4 inline-block max-w-sm">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
              className="mb-4 h-auto max-w-full rounded-lg align-middle leading-none shadow-lg"
              alt="Taking up Water with a Spoon"
            />
            <figcaption className="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.

        
             
      import React from 'react'; 
      
      export default function App() { 
        return (
          <figure className="mb-4 inline-block max-w-sm">
            <img
              src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
              className="mb-4 h-auto max-w-full rounded-lg align-middle leading-none shadow-lg"
              alt="Hollywood Sign on The Hill"
            />
            <figcaption
              className="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 for React 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!