JSFiddle - React, Tailwind, and code Playground

HTML

<section><!-- main section start -->
        <ul id="gallery">
          <li>
            <a href="#">
              <div style="background:#ff784f;"></div> 
              <p>#ff784f</p>
            </a>
            <a href="#">
              <div style="background:lightblue;"></div> 
              <p>lightblue</p>
            </a>
            <a href="#">
              <div style="background:#11980d;"></div> 
              <p>#11980d</p>
            </a>
          </li>
        </ul>
      </section><!-- main section end -->

CSS

/* ========== PAGE: GALLERY CSS START ========== */

        #gallery {
          margin: 0;
          padding: 0;
          list-style: none;
        }

        #gallery li {
          float: left;
          //width: 28.3%;
          padding: 1em 1em 0 1em;
          margin: 2.5%;
          background-color: #fdfee6;
          color: #bdc3c7;
          border-radius: 10px;
          border-bottom:4px solid #bdc3c7;
        }

        #gallery li a { 
          display: inline-block;
        }

        #gallery li div {
          width: 150px;
          height: 150px;
          box-shadow: inset 0 0px 5px -3px #000;
        }

        #gallery li a:first-child div {
          border-radius: 5px 0 0 5px;
        }

        #gallery li a:last-child div {
          border-radius: 0 5px 5px 0;
        }

        #gallery li a p {
          font-family: 'Nunito', sans-serif;
          margin: 0;
          padding: 1em 0;
          color: #384047;
        }



        /* ========== PAGE: GALLERY CSS END ========== */