JSFiddle - React, Tailwind, and code Playground

HTML

<div class="article">
  <ul id="textasiat2">
    <li><a href="#">ce lien sera</a></li>
    <li><a href="#">Ce lien sera</a></li>
    <li class="designer">nouveau style</a></li>
    <li><a href="#">nouveau style</a></li>
  </ul>
  <img class="imagasiat" src="images/asiat.jpeg" alt="asiat">
</div>

CSS

designer {
  color:
    white;
  text-shadow: 2px 2px 4px #000000;
  font-size: 8vw;
  line-height: 8vw;
}

designer li a {
  -webkit-transition: color 2s, font-size 2s;
  -moz-transition: color 2s, font-size 2s;
  -o-transition: color 2s, font-size 2s;
  transition: color 2s, font-size 2s;
}

.designer li a :hover {
  font-size: 20vw;
  color:
    #FAFAD2;
}

#textasiat2 {
  padding: 0;
  margin-left: 50px;
  position: absolute;
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
  text-align: left;
  float: left;
  z-index: 99999;
  font-size: 8vw;
  line-height: 8vw;
}



#textasiat li a {
  color:
    white;
  text-shadow: 2px 2px 4px #000000;
  text-decoration: none;
  ]z-index: 99;


}

#textasiat li a:hover {
  color:
    #FAFAD2;
}

ul {
  list-style: none;
}