JSFiddle - React, Tailwind, and code Playground

by soum1

HTML

<div class="mainWrapper">
  <ul class="tabsWrapper">
    <li class="active"><a href="javascript:;">Tab Item</a></li>
    <li><a href="javascript:;">Tab Item</a></li>
    <li><a href="javascript:;">Tab Item</a></li>
    <li><a href="javascript:;">Tab Item</a></li>
    <li><a href="javascript:;">Tab Item</a></li>
  </ul>
  <ul class="contentWrapper">
    <li class="content active">
      <h2>Content Title 1</h2>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </li>
    <li class="content">
      <h2>Content Title 2</h2>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </li>
    <li class="content">
      <h2>Content Title 3</h2>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </li>
    <li class="content">
      <h2>Content Title</h2>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </li>
    <li class="content">
      <h2>Content Title</h2>
      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
    </li>
  </ul>
</div>

CSS

body * {
  box-sizing: border-box;
}

.mainWrapper {
  display: flex;
  border: 1px solid green;
}

.tabsWrapper,
.contentWrapper {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.tabsWrapper li:last-child a {
  border-bottom: 0;
}

.tabsWrapper {
  width: 30%;
}

.contentWrapper {
  width: 70%;
  background: #caffca;
}

.tabsWrapper li a {
  display: inline-block;
  background: lightgreen;
  color: #000;
  padding: 10px 20px;
  width: 100%;
  text-decoration: none;
  border-bottom: 1px solid green;
  border-right: 1px solid green;
}

.contentWrapper li {
  transform: scale(0);
  transition: opacity 0.6s ease;
  opacity: 0;
}

.contentWrapper li * {
  display: none;
}

.contentWrapper li.active * {
  display: block;
}

.contentWrapper li.active {
  transform: scale(1);
  padding: 0 20px;
  width: 100%;
  height: 100%;
  border-top: 1px solid lightgreen;
  border-bottom: 1px solid lightgreen;
  border-right: 1px solid lightgreen;
  opacity: 1;
}

.tabsWrapper li.active a {
  background: #caffca;
  border-right: 0;
}

JavaScript

$(".tabsWrapper li").on("click", function(){
	var $this = $(this);
  $(".tabsWrapper li").removeClass("active");
  $this.addClass("active");
  var $index = $this.index();
  var $selector = $(" .contentWrapper li:eq(" + $index + ")");
  $(" .contentWrapper li").removeClass("active");
  $selector.addClass("active");
});