JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="block">
  <div class="block-content">

    <ul class="items">
      <li><img src="https://picsum.photos/200/300/?1" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?2" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?3" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?4" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?5" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?6" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?7" alt=""><button><span>Like</span></button></li>
      <li><img src="https://picsum.photos/200/300/?8" alt=""><button><span>Like</span></button></li>
    </ul>

  </div>
</div>

SCSS

.items {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  
  & > li {
    flex: 25% 0 0;
    margin-bottom: 20px;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
    
    & > img {
      display: block;
      margin-bottom: 10px;
      width: 100%;
    }
    
    & > button {
      padding: 5px 10px;
    }
  } 
}