JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<ul class="product-listing">
  <li><a>Assistance voyage</a></li>
  <li><a>Prévoyance TLAM x XAX</a></li>
  <li><a>Protection accidents</a></li>
  <li><a>Frais d'obsèques</a></li>
  <li><a>Protection familiale intégrale</a></li>
  <li><a>Protection Juridique du professionnel</a></li>
  <li><a>Protect me</a></li>
  <li><a>Santé Sortie de Groupe Séniors</a></li>
  <li><a>Solution MD</a></li>
  <li><a>Complémentaire Santé Premi</a></li>
</ul>

CSS

.product-listing {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #f6f7f9;
  padding: 0;
  
  margin-top: 100px;
}
.product-listing li {
  display: block;
}
.product-listing a {
    display: flex;
    align-items: center;
    width: 200px;
    height: 90px;
    background-color: #fff;
    margin: 14px;
    font-family: Arial;
    font-weight: bold;
    padding: 0 80px 0 20px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    border-radius: 4px;
    font-size: 13px;
    position: relative;
    cursor: pointer;
    
    transform: translateY(-60%);
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    -o-transform: translateY(-60%);
}

.product-listing a:after {
  content: '\2192';
  font-size: 20px;
  display: flex;
  height: 100%;
  width: 60px;
  background-color: #fafafb;
  position: absolute;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  
  -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -moz-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -ms-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.product-listing a:hover:after {
  width: 70px;
  padding-left: 26px;
}