JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top-custom-link">
  <ul>
    <li><a href="#"> <span class="top-header-one"> </span></a></li>
    <li><a href="#"> <span class="top-header-two"> </span></a></li>
    <li><a href="#"> <span class="top-header-three"> </span></a></li>
  </ul>
</div>

CSS

.top-header-one {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
}

.top-header-one:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-header-two {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
}

.top-header-two:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-header-three {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
  height: 26px;
  width: 96px;
  display: inline-block;
}

.top-header-three:hover {
  background: url('https://i.postimg.cc/cCBxMXSw/Journey-touch-off.png') no-repeat;
}

.top-custom-link ul li {
  display: inline-block;
}

.top-custom-link ul li:not(:first-child):before {
  content: "|";
}