JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="largeImage">
     <img  src="images.jpg"/>
</div>

<!-- for smallImage is click append larageImage src  -->
<div class="smallImage">
    <span><img  src="image1.jpg"/></span>
    <span><img  src="image2.jpg"/></span>
    <span><img  src="image3.jpg"/></span>
    <span><img  src="image3.jpg"/></span>
    <span><img  src="image4.jpg"/></span>
    <span><img  src="image4.jpg"/></span>
</div>

<!-- for click btn view LargeImage colorbox -->
<div class="tags clearfix">
    <div class="btn">Click</div>
</div>

CSS

.largeImage{
    border:1px solid red;
    height:300px;
    width:500px;
    margin-bottom:10px;
    float:left;
}
.smallImage{
    border:1px solid green;
    width:200px;
    float:left;
    height:300px;
}
.smallImage span{
    border:1px solid gold;
    width:80px;
    height:80px;
    float:left;
    text-align:center;
    cursor:pointer;
}



.tags .btn{
    padding:10px;
    border:1px solid red;
    color:red;
    display:inline-block;
}
.clearfix{
    clear:both;
    display:table;
}
.clearfix:after{
    clear:both;
    display:table;
}