JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<ul class="mod-list">
  <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Организация захоронений</a></span></li>
  <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Организация кремации</a></span></li>
  <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Компенсация 16 562 руб 25 коп от Правительства Москвы</a></span></li>
  <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Бесплатный круглосуточный выезд ритуального агента</a></span></li>
   <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Груз 200 по России и за рубеж</a></span></li>
   <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Ритуальный транспорт до 45 посадочных мест по Москве и МО</a></span></li>
   <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Бесплатное место на кладбище</a></span></li>
   <li><div class="mod-list__image"><span><img src="http://placehold.it/170x100"></span></div><span><a href="">Памятники</a></span></li>
</ul>

CSS

.mod-list * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
}

.mod-list {
  margin-left: -2%;
  margin-right: -2%;
  font-size: 0;
}

.mod-list li {
  display: inline-block;
  vertical-align: top;
  width: 46%;
  margin: 2%;
  height: 100px;
  background: #464646;
  position: relative;
  font-size: 16px;
  line-height: 22px;
  padding-left: 170px;
  background-image: -webkit-linear-gradient( -18deg, rgb(28,28,28) 22%, rgb(70,70,70) 40%);
}

.mod-list li span {
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  padding: 0 20px;
}

.mod-list__image {
  position: absolute;
  left: -15px; top: 0;
  width: 170px;
  height: 100px;
  overflow: hidden;
  -webkit-transform: skew(-10deg, 0deg);
  transform: skew(-10deg, 0deg);
}

.mod-list li .mod-list__image span {
  padding: 0;
  -webkit-transform: skew(10deg, 0deg);
  transform: skew(10deg, 0deg);
  padding-left: 15px;
}

.mod-list li a {
  color: #fff;
  text-decoration: none;
}