JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<h1 class="tabacco-title">TABACCO JS</h1>

    <div id="tabacco">
	
        <ul class="tabs-holder">
            <li>
                <div class="tab-header">
                    <span>Tab - 1</span>
                </div>
                <span class="preview-content">
                    Preview Content - 1
                </span>
            </li>
            <li class="dark">
                <div class="tab-header">
                    <span>Tab - 2</span>
                </div>
                <span class="preview-content">
                    Preview Content - 2
                </span>
            </li>
            <li>
                <div class="tab-header">
                    <span>Tab - 3</span>
                </div>
                <span class="preview-content">
                    Preview Content - 3
                </span>
            </li>
            <li class="dark">
                <div class="tab-header">
                    <span>Tab - 4</span>
                </div>
                <span class="preview-content">
                    Preview Content - 4
                </span>
            </li>
            <li>
                <div class="tab-header">
                    <span>Tab - 5</span>
                </div>
                <span class="preview-content">
                    Preview Content - 5
                </span>
            </li>
        </ul>
        <div class="tabs-content-holder">
            <ul>
                <li class="content-box">TABACCO CONTENT 1</li>
                <li class="content-box">TABACCO CONTENT 2</li>
                <li class="content-box">TABACCO CONTENT 3</li>
                <li class="content-box">TABACCO CONTENT 4</li>
                <li class="content-box">TABACCO CONTENT 5</li>
            </ul>
        </div>
    </div>
    
	</div>

CSS

body {
            font-family: Arial,sans-serif;
            background: #F4F0CB;
			margin:0;
        }
		
		#wrapper{
			width:1280px;
			margin: 0 auto;
			margin-top:50px;
		}

h1.tabacco-title{
text-align:center;
color:#745041;
margin: 0 0 20px 0;
}

        #tabacco {
            background: #3b3a3a;
            height: 375px;
            margin: 0 auto;
            position: relative;
        }

            #tabacco ul.tabs-holder {
                display: inline-block;
                position: relative;
                height: 75px;
                list-style: none;
                margin: 0;
            }

                #tabacco ul.tabs-holder li {
                    position: absolute;
                    text-align: center;
                    float: left;
                    cursor: pointer;
                    background-color: #745041;
                }

                    #tabacco ul.tabs-holder li:hover, #tabacco ul.tabs-holder li.selected {
                        background-color: #8B6453;
                    }

                    #tabacco ul.tabs-holder li.dark {
                        background-color: #B3A580;
                    }

                        #tabacco ul.tabs-holder li.dark:hover, #tabacco ul.tabs-holder li.dark.selected {
                            background-color: #C7BDA6;
                        }

                    #tabacco ul.tabs-holder li .tab-header {
                        height: 75px;
                        width: 100%;
                    }

                        #tabacco ul.tabs-holder li .tab-header span {
                            color: #EEE;
                            font-weight: bold;
                            line-height: 4;
                        }

                    #tabacco ul.tabs-holder li.selected .tab-header span {
                        float: left;
                        margin-left: 30px;
                        font-size: 20px;
                        color: #FFF;
       ...

JavaScript

var $tabacco = $('#tabacco');
                var $tabElems = $('#tabacco ul.tabs-holder li');
                var $tabSmallContents = $('#tabacco ul.tabs-holder li .preview-content');
                var $tabContentHolder = $('#tabacco .tabs-content-holder');
                var $tabContentBoxes = $('#tabacco .tabs-content-holder ul li.content-box');

                //params
                var tabsHolderWidth = 900;
                var passiveTabWidth = 32;
                var hoverTabWidth = 250;
                var marginRightPreview = 1;

                //calculates
                var elCount = $tabElems.length;
                var tabWidth = tabsHolderWidth / elCount - marginRightPreview;
                var activeTabWidth = tabsHolderWidth - (elCount - 1) * passiveTabWidth;
                var shownTabWidth = tabsHolderWidth - (elCount - 2) * passiveTabWidth - hoverTabWidth;

                $tabacco.width(tabsHolderWidth);
                $tabElems.width(tabWidth);
                $tabSmallContents.width(tabWidth);
                $tabContentBoxes.width(tabsHolderWidth);

                var tabPreviewPosLeft;
                for (var i = 0; i < elCount; i++) {
                    tabPreviewPosLeft = (tabWidth + marginRightPreview) * i;
                    $tabElems.eq(i).css({
                        left: tabPreviewPosLeft,
                    });
                }

                $tabElems.click(function () {
                    var selectedTabIndex = $(this).index();
                    var prevSelectedTabIndex = $('#tabacco ul.tabs-holder li.selected').index();
                    var $prevSelectedTab = $('#tabacco ul.tabs-holder li.selected');
                    var leftPosition;

                    if ($(this).hasClass('selected'))
                        return false;

                    //check any tab clicked before
                    if (!$tabElems.hasClass('selected')) {
                        $tabSmallContents.hide();
               ...