JSFiddle - React, Tailwind, and code Playground

HTML

<b>Озер нетворкс</b>
<ul>
  <li>Фасебук<a href="javascript:void(0)">Фасебук/узернаме</a></li>
  <li>Делишз<a href="javascript:void(0)">Делишз/узернаме</a></li>
  <li>Тумблер<a href="javascript:void(0)">Тумблер/узернаме</a></li>
  <li>Фликер<a href="javascript:void(0)">Фликер/узернаме</a></li>
</ul>

CSS

ul {
  list-style-type: none;
  padding: 0;
}

li {
  position: relative;
  padding-left: 50px;
  margin-bottom: 10px;
}

li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: red;
  color: white;
}


/*здесь вместо content надо задать background-image  в соответствии с макетом*/

li:first-child:before {
  content: "Ф";
}

li:nth-child(2):before {
  content: "Д";
}

li:nth-child(3):before {
  content: "Т";
}

li:last-child:before {
  content: "Ф";
}

a {
  display: block;
  line-height: 1.5;
}