JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<div class="links">
<a href="#box1">Box1</a>
<a href="#box2">Box2</a>
<a href="#box3">Box3</a>
</div><!--links-->
<div class="container">
    <div id="box1" class="box">Box1</div>
    <div id="box2" class="box">Box2</div>
    <div id="box3" class="box">Box3</div>
</div><!--container-->

<div class="container">
    <img id="box1-img" class="img" src="asd.jpg" width="300" height="200" alt="img1"/>
    <img id="box2-img" class="img" src="asd.jpg" width="300" height="200" alt="img2"/>
    <img id="box3-img" class="img"  src="asd.jpg" width="300" height="200" alt="img3"/>
</div><!--container-->

CSS

*{margin:0;padding:0; text-align:center;}
.links{
    width:100%;
    height:30px;
}
.container{
    width:300px;
    height:200px;
    border:1px dashed grey;
    margin:20px auto;
}
.box{
    float:left;
    width:300px;
    height:200px;
}
#box1{
    background:grey;
}
#box2{
    background:yellow;
}
#box3{
    background:orange;
}

JavaScript

$(document).ready(function() { 
 
	// Text Box
    $(".box").hide();
	$(".box:first").show();
    
      $(".img").hide();
    $(".img:first").show();
 
	$("a").click(function() {
        var activeLink = $(this).attr("href"); 
        
        $("a").removeClass("active");
        
        $(".box").hide();
        
        $(activeLink).slideDown("normal");
        
        $(".img").hide();
        $(activeLink + "-img").show();
        
        return false;
	});
	
	 
	});