JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="section pb130" id="sec01">
	  <div class="container-1170">
	    <h2 class="h2-h3 mb40 text-center max-width670">Successful influencer marketing starts with the right selection</h2>
	    <div class="cases-tabs" data-class="CustomTabs" data-tab-buttons=".cases-tab" data-tab-buttons-content=".cases-tab-content-pt2" data-tab-contents=".cases-tab-pane-content">
	      <div class="c-cases-tab-menu w-dyn-list">
	        <div class="cases-tab-menu w-dyn-items">
	          <div class="cases-tab w-dyn-item">
	            <div class="cases-tab-content">
	              <div class="cases-tab-content-pt1">
	                <img alt="" class="cases-tab-content-pt1__icon" src="https://assets-global.website-files.com/5caa396f3be192a48d7d44c7/5d6acf7285adc966bb0ab405_ic_historical%20data.png">
	                <div class="cases-tab-content-pt1__name">
	                  Historical content &amp; past performance
	                </div>
	              </div>
	              <div class="cases-tab-content-pt2">
	                <div class="cases-tab-content-pt2__img" style="background-image:url(&quot;https://assets-global.website-files.com/5caa396f3be192a48d7d44c7/5d6fb6dd16986412fdfd9f52_Frame%203.png&quot;)"></div>
	                <p class="cases-tab-content-pt2__text">Find influencers based on their content and performance of their posts. Search for mentions of your brand, competitors, or any topics or hashtags across all platforms.</p>
	              </div>
	            </div>
	            <div class="cases-tab-timer">
	              <div class="cases-tab-timer__progress"></div>
	            </div>
	          </div>
	          <div class="cases-tab w-dyn-item">
	            <div class="cases-tab-content">
	              <div class="cases-tab-content-pt1">
	                <img alt="" class="cases-tab-content-pt1__icon" src="https://assets-global.website-files.com/5caa396f3be192a48d7d44c7/5d6eb16b49e14115ae67f3d9_Group%2017.6.svg">
	                <div...

CSS

.owl-stage{padding-left:0px !important;}
.owl-item img {width: auto!important;}
.owl-nav [class*=owl-]:hover {background: none!important;}
.owl-nav .disabled {opacity: 0.2!important;}
.owl-item:first-child {margin-left: 20px;}

/* tabs */
.cases-tab.w-dyn-item.active > .cases-tab-content {opacity: 1; font-weight: 900;}
.cases-tab.w-dyn-item.active > .cases-tab-timer {
	opacity: 1;
}
.cases-tab-content-pt2__text {
	font-weight: 400!important;
}
.cases-tab:last-child {
  border-bottom: none;
}

.cases-tab.w-dyn-item:not(.active) {
  cursor: pointer; 
}

.cases-tab.w-dyn-item .cases-tab-timer__progress {
  animation-duration: 5000ms;
  animation-timing-function: linear;
  transform-origin: 0 50%;
  transform: scale(0, 1);
  width: 100%;
}

.cases-tab.w-dyn-item.active:not(.timer-active) .cases-tab-timer__progress {
  /* если таймер не активен, то прогресс-бар во всю ширину у активного таба */
  transform: scale(1, 1)
}

.cases-tab.w-dyn-item.timer-active .cases-tab-timer__progress {
  /* если таймер активен, то запускаем анимацию прогресс-бара */
  animation-name: ProgressBarAnimation;
}


/* tabs content */
.cases-tab-pane.w-dyn-items {
  position: relative;
}

.cases-tab-pane-content.w-dyn-item {
  height: auto;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  transition: opacity 300ms ease-out;
}

.cases-tab-pane-content.w-dyn-item:first-child {
  position: relative;
}

.cases-tab-pane-content.w-dyn-item.active {
  opacity: 1;
}


@keyframes ProgressBarAnimation {
  0%   { transform: scale(0, 1) }
  100% { transform: scale(1, 1) }
}

JavaScript

/**
 * data-class="CustomTabs"
 * data-tab-buttons=".cases-tab"
 * data-tab-contents=".cases-tab-pane-content"
 * data-tab-buttons-content=".cases-tab-content-pt2"
 */
var CustomTabs = /** @class */ (function() {
  function CustomTabs(parent) {
    console.log(parent)
    var _this = this;
    this.activeTabIndex = 0;
    this.tabButtons = [];
    this.tabButtonsContent = [];
    this.tabContents = [];
    this.startAnimationByViewport = true;
    this.isTimerActive = true;
    this.timerDuration = 5000;
    this.jQuery = window['jQuery'] || undefined;
    if (!parent) {
      console.warn('CustomTabs. Warning. Called but without parent defined');
    }
    this.parentElement = parent;
    this.setTabButtons(this.parentElement.getAttribute('data-tab-buttons'));
    this.setTabButtonsContent(this.parentElement.getAttribute('data-tab-buttons-content'));
    this.setTabContents(this.parentElement.getAttribute('data-tab-contents'));
    if (this.startAnimationByViewport) {
      var onScrollFn_1 = function() {
        var parentElementRect = _this.parentElement.getBoundingClientRect();
        if (parentElementRect.top < window.pageYOffset) {
          _this.setActiveTab(0);
          window.removeEventListener('scroll', onScrollFn_1);
        }
      };
      window.addEventListener('scroll', onScrollFn_1);
    } else {
      this.setActiveTab(0);
    }
  }
  CustomTabs.prototype.setTabButtons = function(selector) {
    var _this = this;
    this.tabButtons = [];
    var elementsNodeList = this.parentElement.querySelectorAll(selector);
    var _loop_1 = function(i) {
      var element = elementsNodeList[i];
      this_1.tabButtons.push(element);
      element.addEventListener('click', function() {
        if (i === _this.activeTabIndex) {
          return;
        }
        _this.isTimerActive = false;
        _this.setActiveTab(i);
      });
    };
    var this_1 = this;
    for (var i = 0; i < elementsNodeList.length; i++) {
      _loop_1(i);
    }
  };
 ...