JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<div class="box">
  
   <ul class="items">
     
     <li class="item">
       <div class="thumb">
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAJgYeq6aVXTP9ul2Uq1H-KzUBrbJK5coS9_sh33y4OeOAllUM" alt="">
       </div>
       <div class="title">
         <h3>Some title</h3>
       </div>
     </li>
     
   </ul>
  
</div>

SASS

.box
  width: 80vw
  height: 80vh
  margin: 9vh auto
  padding: 10px
  box-sizing: border-box
  border: 1px solid #ddd
  border-radius: 7px
  box-shadow: 0 10px 10px rgba(0,0,0,.1)
  
ul.items
  list-style: none
  padding: 0
  margin: 0
  li.item
    display: flex
    align-items: center
    justify-content: center
    .thumb
      overflow: hidden
      border: 1px solid #ddd
      border-radius: 7px
      margin-right: 10px
      position: relative
      img
        width: 100%
        transform: scale(1.1)