JSFiddle - React, Tailwind, and code Playground

by Manoj Kumar

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 {
       float: left;
   }
   #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 ========== */