JSFiddle - React, Tailwind, and code Playground

by Ksenia Polyakova

HTML

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="" class="nav__link">Facebook</a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">VK</a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">Instagram</a>
    </li>
  </ul>
</nav>

CSS

.nav__list {
  list-style-type: none;
}

.nav__link {
  text-decoration: none;
}

.nav__item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.nav__item::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 5px;
}

.nav__item:first-child::before {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Facebook_icon_2013.svg/1000px-Facebook_icon_2013.svg.png');
}

.nav__item:nth-child(2)::before {
  background-image: url('https://avatars.mds.yandex.net/get-pdb/1220848/67807b1c-9849-413b-a010-4d3c113eb6bb/s1200?webp=false');
}

.nav__item:last-child::before {
  background-image: url('https://avatanplus.com/files/resources/original/5a535cb0ee07f160d5a2134f.png');
}