JSFiddle - React, Tailwind, and code Playground

by alanbeech

HTML

<div class="services-container">
      <a href="#">
        <div class="tile map-search">
          <div class="title">ONE</div>
           <img  src="https://umc.utah.edu/wp-content/uploads/sites/15/2014/11/camera-slr-400px-white.png" />
        </div>
      </a>   
      <a href="#">
        <div class="tile aml">
          <div class="title">TWO</div>
           <img  src="https://umc.utah.edu/wp-content/uploads/sites/15/2014/11/camera-slr-400px-white.png" />
        </div>
      </a> 
      <a href="#">
        <div class="tile ft">
           <img  src="https://umc.utah.edu/wp-content/uploads/sites/15/2014/11/camera-slr-400px-white.png" />
          <div class="title">THREE</div>
        </div>
      </a> 
      <a href="#">
        <div class="tile cls">
          <div class="title">FOUR</div>
           <img  src="https://umc.utah.edu/wp-content/uploads/sites/15/2014/11/camera-slr-400px-white.png" />
        </div>
      </a> 
 </div>

SCSS

body {
  font-family: Arial;
  
  
  
.services-container {
  width: 100%;
  overflow: auto;
  padding: 0 0 7px;
  
  a:hover {
    -webkit-box-shadow: 1px 1px 2px rgba(128,128,128,1);
    -moz-box-shadow: 1px 1px 2px rgba(128,128,128,1);
    box-shadow: 1px 1px 2px rgba(128,128,128,1);
  }
  
  a {
    margin: 0 0 7px 7px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-size: 8px;
    
    
    
    .tile {
       position: relative;
       height:81px;
       width: 81px;
       text-align: center;
    }
    
    .title {
      position: absolute;
      top: 67px;
      width: 100%;
      //border: solid 1px red;
    }
    img {
      position: absolute;
      left: 22px;
      top: 16px;
      width: 40px;
      height: 40px;
    }
    
    .tile.map-search {
      background-color: #256245;
    }
    
    .tile.aml {
      background-color: #836322;
    }
    
    .tile.ft {
      background-color: #193576;
    }
    
    .tile.cls {
      background-color: #356332;
    }
  }

}
}