JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <figure>
    <img width="400" src="https://images.unsplash.com/photo-1752439910625-437e68217c37?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor inci-
didunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam.</figcaption>
  </figure>

  <figure>
    <img width="600" src="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam.
</figcaption>
  </figure>
</div>

CSS

figure {
  box-shadow: 0 20px 40px -14px oklch(from black l c h / 25%);
  background-color: var(--color-lightest);
  inline-size: fit-content;
  margin-inline: auto;
}

img {
  max-width: 100%;
}

figcaption {
  contain: inline-size;
  /* container-type: inline-size; */
  padding: 1.5em;
}