JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<div id="left">Sidebar</div>
<div id="right">
    <div class="thumbs" id="one"><a href="#">Click on this DIV loads new content inside #right. All .thumbs disappear and new content shows.</a></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div>    
    
     <div class="thumbs"></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div>
    <div class="thumbs"></div> 
        <div class="new_thumbs"></div> 
         <div class="new_thumbs"></div> 
    <div class="new_thumbs full"></div> 
    <div class="new_thumbs"></div> 
        <div class="new_thumbs"></div> 

</div>

CSS

#left {
    height:100%;
    background:blue;
    width:20%;
            box-sizing:border-box;
    border-right:10px solid white;
    float:left;
}

.full {width:100%!important;}
.new_thumbs {
    display:none;
     box-sizing:border-box;
    border-right:10px solid white;
     border-bottom:10px solid white;
float:left;
    width:50%;
padding-bottom:30%;
background:yellow;

}
.thumbs {
        box-sizing:border-box;
    border-right:10px solid white;
     border-bottom:10px solid white;
float:left;
    width:25%;
padding-bottom:30%;
background:blue;

}

#right {
    float:right;
       height:100%;
    background:red;
    width:80%;
            box-sizing:border-box;
    border-right:10px solid white;
}

JavaScript

$(".thumbs#one").click(function(){
  $(".thumbs").hide();
    $(".new_thumbs").show();
});