JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div id="layer1">
    <a href="#" onclick="afficher()" id="layer3">open here</a>
</div>
<div id="layer2">
    <form method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form> 
        
<form method="POST">
    <input type="submit" value="Submit"><br><br>
      <input type="button" value="<<Back"> <input type="button" value="Next>>">
</form>
          <img src="https://lh6.googleusercontent.com/-Wk3zs8s_PV0/Uqk_K7Fin_I/AAAAAAAACao/rsgKUZFddhI/w957-h373-no/DSC_0026.jpg" width="500" height="264">
    <ul>
            <li>Hi</li>
            <li>me</li>
            <li>too</li>
            <li><a href="#" onclick="fermer()">Close</a></li>
    </ul>
</div>

CSS

#layer1 {     
visibility : visible;     
position : relative;     
}     

#layer2 {     
visibility : hidden;     
position : absolute;     
}

JavaScript

function afficher() {  
document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative';  
document.getElementById('layer3').style.visibility='hidden';  
}  
       
function fermer() {  
document.getElementById('layer2').style.visibility ='hidden';  
document.getElementById('layer2').style.position ='absolute';  
document.getElementById('layer3').style.visibility='visible';  
}