JSFiddle - React, Tailwind, and code Playground

by Dmitry Brusenskiy

HTML

<div class="container">
  <ul class="cf">
    <li class="sweet"><a href="#">Сладости</a></li>
    <li class="tea"><a href="#">Чай</a></li>
    <li class="coffee"><a href="#">Кофе</a></li>
    <li class="ware"><a href="#">Посуда</a></li>
  </ul>
</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container {
  overflow-y: hidden;
  height: 150px;
  position: relative;
}

ul {
  position: absolute;
  top: 50%;
  margin-top: -150px;
  display: block;
  width: 100%;
  height: 300px;
}

ul li {
  float: left;
  display: block;
  width: 150px;
  height: 300px;
  position: relative;
  transform: rotate(-30deg);
  overflow: hidden;
  margin-left: 50px;
}

ul li + li {
  margin-left: 23px;
}

ul li:after {
  content: "";
  display: block;
  position: absolute;
  left: -100%;
  right: -100%;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  z-index: 10;
  transform: rotate(30deg);
}

ul li:hover {
  cursor: pointer;
}

ul li:hover:after {
  opacity: 0.5;
}

ul li a {
  margin: 10px auto;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  text-decoration: none;
  padding: 3px 15px;
  border-radius: 3px;
  position: absolute;
  width: 70%;
  bottom: 80px;
  left: 50%;
  margin-left: -35%;
  transform: rotate(30deg);
  text-align: center;
  z-index: 11;
}

.sweet:after {
  background-image: url("http://www.vashaibolit.ru/uploads/posts/2013-02/1361930994_6a00d8341c3c3253ef00e54f32ad8d8833-640wi.jpg");
}

.tea:after {
  background-image: url("http://foodinformer.ru/wp-content/uploads/2013/02/chernii-chai.jpg");
}

.coffee:after {
  background-image: url("https://flytothesky.ru/wp-content/uploads/2017/01/4231-1.jpg");
}

.ware:after {
  background-image: url("http://www.stoneline-posuda.ru/images/stoneline-sloy-2.jpg");
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}