JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="tab">
  <ul class="tabs active">
    <li class="">
      <a href="#">
        <i class="icofont-network"></i>
        <br> Networking
      </a>
    </li>

    <li class="">
      <a href="#">
        <i class="icofont-file-php"></i>
        <br> PHP
      </a>
    </li>

    <li class="current">
      <a href="#">
        <i class="icofont-file-python"></i>
        <br> Python
      </a>
    </li>

    <li>
      <a href="#">
        <i class="icofont-brand-designfloat"></i>
        <br> Design
      </a>
    </li>

    <li>
      <a href="#">
        <i class="icofont-file-html5"></i>
        <br> HTML5/CSS3
      </a>
    </li>

    <li>
      <a href="#">
        <i class="icofont-ui-camera"></i>
        <br> Photography
      </a>
    </li>
  </ul>
  <div class="tab_content">
    <div class="tabs_item">
      <div class="row">
        <div class="col-lg-6 col-md-12 reveal-left-fade" data-sr-id="2" style="; visibility: visible;  -webkit-transform: translateX(0); opacity: 1;transform: translateX(0); opacity: 1;-webkit-transition: -webkit-transform 0.8s linear 0s, opacity 0.8s linear 0s; transition: transform 0.8s linear 0s, opacity 0.8s linear 0s; ">
          <div class="tabs_item_img">
            <img src="http://codestar.xyz/demo/eduserve/assets/img/course/course-img-1.jpg" alt="Course">
          </div>
        </div>
        <div class="col-lg-6 col-md-12 reveal-right-fade" data-sr-id="6" style="; visibility: visible;  -webkit-transform: translateX(0); opacity: 1;transform: translateX(0); opacity: 1;-webkit-transition: -webkit-transform 0.8s linear 0s, opacity 0.8s linear 0s; transition: transform 0.8s linear 0s, opacity 0.8s linear 0s; ">
          <div class="tabs_item_content">
            <h3>Nural Networking</h3>
            <p>Hamburger pork beef shank turducken drumstick pork loin. Pork short ribs rump fatback capicola ham strip steak jowl filet...

CSS

.tabs {
	list-style-type: none;
	margin-bottom: 40px;
	padding-left: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}
.tabs li {
	-ms-flex: 0 0 16.6666666667%;
	flex: 0 0 16.6666666667%;
	max-width: 16.6666666667%;
	padding-right: 15px;
	padding-left: 15px;
	text-align: center;
}
.tabs li a {
	display: block;
	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
	background: #fff;
	border-radius: 3px;
	padding: 25px 12px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: #3b566e;
	position: relative;
	z-index: 1;
}
.tabs li a:hover, .tabs li a:hover i, .tabs li.current a, .tabs li.current a i {
    color: #fff;
}
.tabs li a i {
	color: #ff007a;
	font-size: 40px;
	margin-bottom: 15px;
	display: inline-block;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}
.tabs li:first-child a {
	border-radius: 30px 0 0 0;
}
.tabs li:last-child a {
	border-radius: 0 30px 0 0;
}
.tabs li a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ff007a;
    background: linear-gradient(to top, rgba(255, 0, 122, 1) 0%, rgba(142, 0, 116, 1) 100%);
	z-index: -1;
    opacity: 0;
    border-radius: 3px;
    -webkit-transform: scale(.9);
    transform: scale(.9);
    visibility: hidden;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}
.tabs li:first-child a::before {
	border-radius: 30px 0 0 0;
}
.tabs li:last-child a::before {
	border-radius: 0 30px 0 0;
}
.tabs li a:hover::before, .tabs li.current a::before {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.tabs_item:first-child {
	display: block;
}
.tabs_item {
	display: none;
	background: #fff;
	box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
}
.tabs_item_content {
	padding: 30px 20px;
}
.tabs_item_content h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom:...

JavaScript

// Tabs
$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
$('.tab ul.tabs li a').on('click', function (g) {
  var tab = $(this).closest('.tab'), 
      index = $(this).closest('li').index();
  tab.find('ul.tabs > li').removeClass('current');
  $(this).closest('li').addClass('current');
  tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
  tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
  g.preventDefault();
});