JSFiddle - React, Tailwind, and code Playground

by onmouseclick

HTML

<div class="txt">

<a href="#a">clic</a>

<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>left

</div>
  
<div class="background">
<div class="txt2">
   
<div id="a" class="anchor"><br>this is a id
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>quand on lit ce message fade out tout ce texte de la partie droite pour revenir au point de depart</div>


  

  
</div></div>

CSS

.txt{ font-family: "Times New Roman", Times, serif; width: 45%; margin-left: 3%; font-size: 40px; color: black; margin-top:40px; }

.background{ position: fixed; top: 0; left: 50%; width: 50%; height: 100%; background-color: #EAECEE; overflow: scroll; }

.txt2{ margin-left: 7%; margin-right: 7%; color: black; margin-top: 40px; transition: all 2s linear; }
.topdiv{ font-family: "Times New Roman", Times, serif; font-size: 40px; display: block; }

a{ text-decoration: none; color: black; }
.underline{ text-decoration: #e0e0e0  underline; }
.underline2{ text-decoration: white  underline; }
.carre{ width: 30px; height: 30px; background: red; margin-bottom: 0px; float: right; }


@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


.anchor{ margin-top: -40px; }

#a{ display: none; opacity: 0; }

#a:target{ -webkit-animation: fadeIn 4s; display: block; opacity: 1; }