JSFiddle - React, Tailwind, and code Playground

by Arun Mathew

HTML

<div class="container">
  <ul> 
    <li>
      <a href="#">
        <span class="img"></span>
        <span class="title">Title one</span>
      </a>         
    </li>
    <li>
      <a href="#">
        <span class="img"></span>
        <span class="title">Title Two</span>
      </a>  
    </li>
  </ul>
</div>

SCSS

ul{
  margin: 0;
  padding: 0;
  list-style: none;
  li{
    display: inline-block;
    padding: 15px;
    a{      
      padding-left: 30px;
      display: table;
      text-decoration: none !important;
      span{
        display: table-cell;
        position: relative;
        overflow: hidden;
        vertical-align: middle;

        &.img{
          margin-right:15px;   
          width: 50px;
          height: 50px;
        }
        &.title{
          padding-left: 20px;
        }
      }
      span.img::before{
        content: "";
        position: absolute;
        display: inline-block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: url("https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");
        background-size: cover;
        background-position: center;
        border-radius: 50%;
      

      }
      span.img:hover::before{
        background: url("https://i2.wp.com/creativecompetitor.com/wp-content/uploads/2014/03/baby-rabbits.jpg");
      }
      
    }
  }
}