JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="flexbox">
           <figure> 
          <img src="http://placehold.it/450x280/ffcc33">
          <figcaption>Test 1</figcaption>
           </figure>
           <figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 2</figcaption>
           </figure>
            <figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 3</figcaption>
           </figure>
            <figure>
            <img src="http://placehold.it/450x280/ffcc33">
            <figcaption>Test 4</figcaption>
           </figure>
            <figure><img src="http://placehold.it/450x280/ffcc33">
                <figcaption>Test 5</figcaption>
           </figure>
            <figure><img src="http://placehold.it/450x280/ffcc33">
                <figcaption>Test 6</figcaption>
           </figure>
            <figure><img src="http://placehold.it/450x280/ffcc33">
                <figcaption>Test 7</figcaption>
           </figure>
            <figure><img src="http://placehold.it/450x280/ffcc33">
                <figcaption>Test 8</figcaption>
           </figure>
            <figure><img src="http://placehold.it/450x280/ffcc33">
                <figcaption>Test 9</figcaption>
           </figure>
       </div>

CSS

figure {
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0;
      }
      .flexbox {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
      }
      .flexbox figure {
         position: relative;
         margin: 0.5rem;
      }
      .flexbox img {
         width: 250px;
         border-radius: 15px;
      }
      .flexbox figcaption {
         background: rgba(0, 0, 0, 0.5);
         color: white;
         text-align: center;
         position: absolute;
         bottom: 0;
         width: 100%;
         padding: 0.3rem 0rem;
         border-bottom-right-radius: 15px;
         border-bottom-left-radius: 15px;
      }