search results:

    Get started License Playground Services Free hosting Community
    • + D
    • Light
    • Dark
    Tailwind Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
      • Contribute
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Svelte
      • Vue
    • Content & styles
      • Animations
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Checkbox
      • Datepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Coming Soon
      • Angular
      • Builder
      • React
      • Templates
      • Vue

    Figures

    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 Dev.to Share via Twitter Share via Facebook Share via Pinterest Share via Reddit Share via StumbleUpon Share via Vkontakte Share via Weibo Share via HackerNews Share via Gmail Share via Email


    Related resources

    Textarea How To Center Text In Bootstrap How To Center Image Text Utilities Typography Images

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

    • Basic examples
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com