JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="tran2">
<a href="#" class="show">Modifier le mot de passe</a> 
<a href="#" class="hide">Annuler</a>
<div id="menu" class="tran15">
<form method="POST" action="index.php">
        <p>Nom :</p>
        <input type="text" name="nom" placeholder="">
        <p>Ancien mot de passe :</p>
        <input type="password" name="mdpa">
        <p>Nouveau mot de passe :</p>
        <input type="password" name="nvmdp">
        <p>Confirmer nouveau mot de passe :</p>
        <input type="password" name="nvmdp2">
        <input type="submit" value="Valider" name="submodif">
        </form>
</div></div>

CSS

.tran15 {
  -webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -ms-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;  
}
 
.tran2 {
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
 
#nav { padding: 1ex; border: 2px solid #aaa; background-color: #ccf; margin: 1em; width: 20em; }
#nav:hover { border: 2px solid #ddd; background-color: #eef; }
#nav h2 { display: inline; vertical-align: middle; }
 
.hide, .show  { display: none;  font-size: 80%; vertical-align: middle; }
 
@media all and (min-width:1px) { .hide, .show  { display: inline; } }
 
a.show:focus + .hide { display: inline; }
.hide { display: none; }
a.show:focus { display: none; }
 
#menu { opacity: 0; height:0px; margin-top: 0em; width: auto; margin-left: -1ex; overflow: hidden; }
a.show:focus ~ #menu { opacity: 1; height: 300px; }
 
@media print {
.hide, .show  { display: none; }
#nav {position: static; border: none; width: auto;}
#menu {width: auto;} 
}