JSFiddle - React, Tailwind, and code Playground

by karmeljuk

HTML

<div class="header">
<div class="logo">
<a href="http://toddmotto.com" target="_blank">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Logo" class="logo-img">
</a>
</div>
<ul class="demo-nav">
<li class="demo-nav-link">
<a href="http://toddmotto.com/simple-html5-data-attribute-jquery-tabs-markup-free-and-relative-to-their-container-for-ultimate-reuse">Go to tutorial</a>
</li>
</ul>
</div>
<div class="wrapper">
<div class="main">

<p class="main-desc">
Simple HTML5 data-* jQuery tabs. Markup free and relative to their container for ultimate re-use.
</p>

<!-- tabs -->
<div class="tabs">
<a href="#" data-tab="1" class="tab active">Tab 1</a>
<a href="#" data-tab="2" class="tab">Tab 2</a>
<a href="#" data-tab="3" class="tab">Tab 3</a>
<a href="#" data-tab="4" class="tab">Tab 4</a>
<a href="#" data-tab="5" class="tab">Tab 5</a>

<div data-content="1" class="content active">Tab 1 Content</div>
<div data-content="2" class="content">Tab 2 Content</div>
<div data-content="3" class="content">Tab 3 Content</div>
<div data-content="4" class="content">Tab 4 Content</div>
<div data-content="5" class="content">Tab 5 Content</div>
</div>
<!-- /tabs -->

<!-- tabs -->
<div class="tabs">
<a href="#" data-tab="1" class="tab">Tab 1</a>
<a href="#" data-tab="2" class="tab">Tab 2</a>
<a href="#" data-tab="3" class="tab">Tab 3</a>
<a href="#" data-tab="4" class="tab active">Tab 4</a>
<a href="#" data-tab="5" class="tab">Tab 5</a>

<div data-content="1" class="content">Tab 1 Content</div>
<div data-content="2" class="content">Tab 2 Content</div>
<div data-content="3" class="content">Tab 3 Content</div>
<div data-content="4" class="content active">Tab 4 Content</div>
<div data-content="5" class="content">Tab 5 Content</div>
</div>
<!-- /tabs -->

</div>
</div>

CSS

/*
	Todd Motto Labs
	URL: www.toddmotto.com
*/

body {
	background:#FFF;
}
a,
a:hover {
	text-decoration:none;
	color:#FFF;
}
ul,
ol {
	list-style:none;
}
.wrapper {
	max-width:1280px;
	width:95%;
	margin:0 auto;
	position:relative;
}
.main {
	width:100%;
	max-width:500px;
	margin:50px auto;
}
.main-desc {
	font-size:16px;
	margin:0 0 50px 0;
}

/*------------------------------------*\
	Simple HTML5 data-tabs
\*------------------------------------*/

.tab {
    float:left;
    display:block;
    padding:10px 20px;
    text-decoration:none;
    border-radius:5px 5px 0 0;
    background:#F9F9F9;
    color:#777;
}
.tab.active,
.tab:hover {
	background:#DDD;
	color:#222;
}
.content {
    display:none;
    clear:both;
    background:#FFF;
    padding:20px;
}
.content.active {
    display:block;
}

JavaScript

$(function () {

        $('[data-tab]').on('click', function (e) {
          $(this)
            .addClass('active')
            .siblings('[data-tab]')
            .removeClass('active')
            .siblings('[data-content=' + $(this).data('tab') + ']')
            .addClass('active')
            .siblings('[data-content]')
            .removeClass('active');
          e.preventDefault();
        });

      });