JSFiddle - React, Tailwind, and code Playground

by herde2

HTML

<div id="ancre_3" class="article">
  <ul id="textasiat" class="niveau3 textasiat animClass">
    <li><a href="#">bolo</a></li>
    <li><a href="#">Ce lien sera</a></li>
    <li><a href="#">Ce lien sera</a></li>
    <li><a href="#">Ce lien sera</a></li>
  </ul>
  <img class="niveau4 imagasiat2" src="https://picsum.photos/200"> 
		</div>

CSS

#textasiat li a {
	color: #00BFFF;
				text-decoration: none;
				z-index: 9999999999999999999;

	
}
#textasiat li a:hover {
  color: 	#FAFAD2;
}
ul {
		list-style:none;}
#textasiat2 li a {
    font-size:6vw;
	line-height:6vw;
    color: #00BFFF;
    
    -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;
}

#textasiat2 li a:hover {
    font-size: 8vw;
    color: 	#FAFAD2;
	}


#content {
    margin:0;
    width:100%;
	padding-left: 0%;
		padding-right: 0%;
bottom: 0;
    height: 100vh;
    overflow:hidden;
    position:relative;
    padding-top:0;
	background-color: black;
}
#slide { /* initialisé en javascript */
/*    position:relative; /**/
/*    width:400%;   /* contient 4 éléments donc 4x100 = 400% */
}
.article { /* initialisé en javascript */
/*    width:25%;    /* il y a 4 éléments donc 100/4 = 25% */
/*    float:left;/**/
}
.fleche {
    position:absolute;
    top:50%;
    font-size:8em;
    line-height:1em;
    color:white;
    cursor:pointer;
		z-index: 99999999;

}
.fleche:hover {
    color:red;
}
.droite {
    right:0;
}
.gauche {
    left:0;
}
			
			
			
			
			
			
			
			
			
			
			
			
			
			
#textasiat{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	margin-left: 50px;
	position: absolute;
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
	text-align: left;
	text-decoration: none;
	float: left;
	z-index: 99999;
	font-size: 6vw;
	line-height: 6vw;
}
#textasiat2{
	padding: 0;
	height: auto;
	bottom: auto;
	margin-top: 50px;
	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: 6vw;
	line-height: 6vw;}



.animClass {
	backface-visibility: hidden;
	margin-right: 0px;
	right: 0px;
	position: relative;
	top: 0px;
	left:...