JSFiddle - React, Tailwind, and code Playground

HTML

<div id="poolbox1" class="poolbox"><a id="poolview1" class="poolview" href="#">poolview1</a>content</div>
<div id="poolbox2" class="poolbox"><a id="poolview2" class="poolview" href="#">poolview2</a>content</div>
<div id="poolbox3" class="poolbox"><a id="poolview3" class="poolview" href="#">poolview3</a>content</div>

CSS

.poolbox{
    height:400px;
    width:100px;
    background-color:pink;
    border:1px solid yellow;
    display: inline-block;
}
.poolview{display:inline; width:31px; height:31px; }

.poolbox{width:150px;  height:400px; background-color:#666666;opacity: 0.9; filter: alpha(opacity=90);}

JavaScript

$(".poolview").click(function(){
     $(".poolbox").animate({
          marginLeft: "400px",          
          width: "0px"
     }, 1000);
     $(this).parent().animate({
          marginLeft: "0px",          
          width: "400px"
     }, 1000);
     $(".poolview").fadeIn(1000);
     $(this).fadeOut(1000);
     $("#maincontent").fadeOut(1000);
});