JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="bloc-items one">
	<li class="bloc-item"><a href="http://www.lien1.com">X</a></li>
	<li class="bloc-item"><a href="http://www.lien2.com">X</a></li>
	<li class="bloc-item"><a href="http://www.lien3.com">X</a></li>
</ul>

<hr>

<ul class="bloc-items two">
	<li class="bloc-item"><a href="http://www.lien1.com">Y</a></li>
	<li class="bloc-item"><a href="http://www.lien2.com">Y</a></li>
	<li class="bloc-item"><a href="http://www.lien3.com">Y</a></li>
</ul>

CSS

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

a,
a:visited {
  color: black;
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  color: grey;
  text-decoration: underline;
}

.bloc-items {
  background-color: blue;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bloc-item {
  height: 25px;
  width: 25px;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.bloc-items.one li.bloc-item {
  background-color: yellow;
}

.bloc-items.two li.bloc-item {
  background-color: pink;
  margin-right: -4px;
}

li.bloc-item a {
  margin: 0;
  padding: 0;
}