JSFiddle - React, Tailwind, and code Playground

by Jithin Raj P R

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all-wrap">
  <div class="m-wrap">
    <a href="#link_1">Link 1</a>
    <a href="#link_2">Link 2</a>
    <a href="#link_3">Link 4</a>
    <a href="#link_4">Link 3</a>
  </div>
  <article id="link_1" class="active">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>

  <article id="link_2">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
  </article>

  <article id="link_3">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
  </article>

  <article id="link_4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit...

CSS

.all-wrap{
  padding:10px;
}

.m-wrap {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-row-gap: 80px;
  grid-template-rows: 40px 1fr;
  justify-content: space-between;
}

a {
  border: 1px solid black;
}

article {
  display: none;
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  border: 1px solid black;
}

article.active {
  display: block;
}

JavaScript

$(document).on('click','.m-wrap a',function(event){
	event.preventDefault();
	var url = $(this).attr('href');
  $('article').removeClass('active');
  $(url).addClass('active');
});