JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

	<div class="banner">
		MyTennisStore presents 12 Deals in 12 Days
	</div>
	  
	<div id='tab1' class="tabcontent">
		tab1
	</div>

	<div id='tab2' class="tabcontent">
		tab2
	</div>

	<div id='tab3' class="tabcontent">
		tab3
	</div>

	<div id='tab4' class="tabcontent">
        tab4
	</div>

	<div id='tab5' class="tabcontent">
		tab5
	</div>

	<div id='tab6' class="tabcontent">
		tab6
	</div>

	<div id='tab7' class="tabcontent">
		tab7
	</div>

	<div id='tab8' class="tabcontent">
		tab8
	</div>

	<div id='tab9' class="tabcontent">
		tab9
	</div>

	<div id='tab10' class="tabcontent">
		tab10
	</div>

	<div id='tab11' class="tabcontent">
        tab11
	</div>

	<div id='tab12' class="tabcontent">
		tab12
	</div>

	<ul class='tabs'>
		<li><a href='#tab1'>Day 1</a></li>
	    <li><a href='#tab2'>Day 2</a></li>
	    <li><a href='#tab3'>Day 3</a></li>
	    <li><a href='#tab4'>Day 4</a></li>
	    <li><a href='#tab5'>Day 5</a></li>
	    <li><a href='#tab6'>Day 6</a></li>
	    <li><a href='#tab7'>Day 7</a></li>
	    <li><a href='#tab8'>Day 8</a></li>
	    <li><a href='#tab9'>Day 9</a></li>
	    <li><a href='#tab10'>Day 10</a></li>
	    <li><a href='#tab11'>Day 11</a></li>
	    <li><a href='#tab12'>Day 12</a></li>
	</ul>

</div>

CSS

html, body {margin:0px;
	font-family:Arial;}
ul {list-style:none;}
.container {width:980px;}
.banner {text-align:center; padding:15px; background:#999; font-size:24px; line-height:1.4; color:white; font-weight:300;}
.tabs {padding:0px; margin:0px;}
.tabs li {float:left; width:8.3%; text-align:center;}
.tabs a {padding:5px 0px; background:#666; color:#fff; text-decoration:none; display:block; width:100%;}
.tabs a.active {background:#333; color:white;}
.tabcontent {position:relative; padding:10px 20px; background:#333; color:white;}

JavaScript

$('ul.tabs').each(function () {
	     // For each set of tabs, we want to keep track of
	     // which tab is active and it's associated content
	     var $active, $content, $links = $(this).find('a');

	     // If the location.hash matches one of the links, use that as the active tab.
	     // If no match is found, use the first link as the initial active tab.
	     $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
	     $active.addClass('active');

	     $content = $($active[0].hash);

	     // Hide the remaining content
	     $links.not($active).each(function () {
	         $(this.hash).hide();
	     });

	     // Bind the click event handler
	     $(this).on('click', 'a', function (e) {
	         // Make the old tab inactive.
	         $active.removeClass('active');
	         $content.hide();

	         // Update the variables with the new link and content
	         $active = $(this);
	         $content = $(this.hash);

	         // Make the tab active.
	         $active.addClass('active');
	         $content.show();

	         // Prevent the anchor's default click action
	         e.preventDefault();
	     });
	 });