JSFiddle - React, Tailwind, and code Playground

by kairavthakar2016

HTML

<a href="#red" class="trigger">Link 1</a>
  <a href="#pink" class="trigger">Link 2</a>
  <a href="#blue" class="trigger">Link 3</a>
  <a href="#green" class="trigger">Link 4</a>

    <div class="main">
        <div id="red" class="red basic"></div>
        <div id="pink" class="pink basic"></div>
        <div id="blue" class="blue basic"></div>
        <div id="green" class="green basic"></div>
    </div>

CSS

.main{
    position: relative;
    width: 500px;
    height: 500px;
}

.basic{
    width: 300px;
    height: 300px;
    position: absolute;
    right: 0;
}

.basic.active{z-index:1;}

.red {
    background-color: red;
}
.pink {
    background-color: pink;
    
}
.blue{
    background-color: blue;
   
}
.green {
    background-color: green;
   
}

JavaScript

$(".trigger").click(function(e){
e.preventDefault();
    $('.trigger').removeClass('checked') 
    $(this).addClass('checked');
    
    $('.main div[id*="'+$(this).attr('href')+'"]').addClass('active');
 })