JSFiddle - React, Tailwind, and code Playground

by mauro_nappolini

HTML

<!-- Auto Rotate Tabs in Webflow -->
<script>
	var Webflow = Webflow || [];
Webflow.push(function () {
	// DOMready has fired
	// May now use jQuery and Webflow api

	// start everything
	var tabTimeout;
	clearTimeout(tabTimeout);
	tabLoop();

	// Cycle through all tabs. Match class names
	function tabLoop() {
  if($(window).width() >= 1024) {
     tabTimeout = setTimeout(function () {
			var $next = $('.hero-tabs-menu').children('.w--current:first').next();

			if ($next.length) {
				$next.click(); // user click resets timeout
			} else {
				$('.standard-tab:first').click();
			}
		}, 15000); // 5 second tab loop
    console.log("1024px");
    }  
	}

	// Reset loop if a tab is clicked
	$('.standard-tab').click(function () {
		clearTimeout(tabTimeout);
		tabLoop();
	});
}); 

</script>

JavaScript

<!-- Auto Rotate Tabs in Webflow -->
<script>
	var Webflow = Webflow || [];
Webflow.push(function () {
	// DOMready has fired
	// May now use jQuery and Webflow api

	// start everything
	var tabTimeout;
	clearTimeout(tabTimeout);
	tabLoop();

	// Cycle through all tabs. Match class names
	function tabLoop() {
		tabTimeout = setTimeout(function () {
			var $next = $('.hero-tabs-menu').children('.w--current:first').next();

			if ($next.length) {
				$next.click(); // user click resets timeout
			} else {
				$('.standard-tab:first').click();
			}
		}, 15000); // 5 second tab loop
	}

	// Reset loop if a tab is clicked
	$('.standard-tab').click(function () {
		clearTimeout(tabTimeout);
		tabLoop();
	});
}); 

</script>