JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="#Search">Search</a></li>
   <li class="second-selected"><a href="#Post">Post</a></li> 
   </ul>  
</div>

 


<div id="Post" class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>
    
<div id="Search" class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="submit" value="Search"/></p>
</div>

CSS

li
{
    display: inline-block;
}
.search
{
    display: block;
}
.post
{
    display:none;
}
.post:target
{
    display: block;
}

.post:target + .search
{
    display: none;
}