JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "tabContentCarousel" id = "about" onclick="showTabCarousel()">
   <div class = "contentText" id = "aboutContent">
    <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
  </div>
  
  <div class = "contentPicture" id = "aboutPicture">
	<p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
  </div>
</div>

<div class="tabContentCarousel" id="advantages" onclick="showTabCarousel()">
  <div>
    <p>Advantages of tabs</p>    
  </div>
</div>

<div class="tabContentCarousel" id="usage" onclick="showTabCarousel()">
  <div>
    <p>usage of tabs</p>
	<p>Content Line 2</p>
  </div>
</div>

<ul id="tabsCarousel">
  <li class='on'><a href="#about">About JavaScript tabs</a></li>
  <li><a href="#advantages">Advantages of tabs</a></li>
  <li><a href="#usage">Using tabs</a></li>
</ul>

CSS

ul#tabsCarousel 
{ 
    list-style-type: none;
	margin-left:-39px;
    margin-top: 15px; /*change this to a little more than the image dimensions*/ 
    padding-top:5px;
    padding-bottom:7px;
    background: white; 	
    
}

ul#tabsCarousel li 
{ 
   	display:block;
	float:left;
}

ul#tabsCarousel li a 
{
  color: black;
  background-color: #BCBCBC; 
  border-right:3px solid white;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:5px;
  padding-left:5px;
  text-align:center;
}

ul#tabsCarousel li a:hover
{ 
    background-color: #F8981D;
    color:white;
    text-decoration:none;
}

ul#tabsCarousel li a.selected
{ 
   color: white; 
   background-color: #F8981D;
   text-decoration:none;
}

div.tabContentCarousel 
{ 
 width: 640px; height: 180px; margin: 0 auto 0 0; /*change to relative alternatively with tabs*/ 
}

div.tabContentCarousel  .wrapperCarousel
{
	  overflow: auto; position: relative; 
      border:1px solid white;  
      background-color:#E5E5E5;    
}

div.tabContentCarousel  .wrapperCarousel .contentCarousel
{
	margin-left:150px;
    padding-left:30px;
    color: black;
	margin-top:10px;
	margin-right:10px;
	text-align:left;
}

div.tabContentCarousel .wrapperCarousel .pictureCarousel
{
    margin-right:10px;
}


div.tabContentCarousel.hide 
{
 display: none;
}

/*div#errorCarousel
{
    margin: -206px 0 0 0;
        
    color:black;    
}*/

JavaScript

$(document).ready(function ()
{
    initCarousel();
});

var stopVar;
function initCarousel(timeToStand)
{
    // Grab the tab links and content divs from the page
    var tabListItems = $('#tabsCarousel li');
    var selectedTab = $('#tabsCarousel').find('li.on');
    var index = $(selectedTab).index();
    var timeInMilliSecs = (timeToStand * 1000);
    
       
    // loop through all tab li tags
    $('#tabsCarousel li').each(function (i, ele) {
        // Assign click/focus events to the tab anchor/links
        var tabLink = $(this).find('a').on('click', showTabCarousel).on('focus', function () { $(this).blur(); });

        var tabBody = $($(tabLink).attr('href'));

        // highlight the first tab
        if (i == 0) $(tabLink).addClass('selected');

        // hide all the content divs but the first
        if (i != 0) $(tabBody).hide();
    });
     
    // auto-rotate every timeInMilliSecs
    if (timeToStand)
    {
         stopVar = setInterval(function () {
            if (index < $('#tabsCarousel').find('li').length - 1) {
                index++;
                //console.log("in IF" + index);
            }
            else {
                index = 0;
                //console.log("In else" + index);
            }

            $('#tabsCarousel').find('li:eq(' + index + ') a').click();
        }, timeInMilliSecs);
    }
    
}

function showTabCarousel(e) {
        // prevent default anchor/link action
        e.preventDefault();

        var selectedId = $(this).attr('href');

        // remove 'on' class from all tab li tags
        $('#tabsCarousel').find('li').removeClass('on');

        // remove 'selected' class from all tab anchors/links
        $('#tabsCarousel').find('a.selected').removeClass('selected');

        // add 'on' class to selected tab li tag
        $(this).closest('li').addClass('on');

        // add selected class 
        $(this).addClass('selected');

        // hide all tab bodies
       ...