JSFiddle - React, Tailwind, and code Playground

by guisasso

HTML

<ul class="tabs">
	        	
			        <li><a href='#tab1'>Tab #1</a></li>
			        <li><a href='#tab2'>Tab #2</a></li>
			        <li><a href='#tab3'>Tab #3</a></li>
			        <li><a href='#tab4'>Tab #4</a></li>
			       
			    </ul>
			    
<div id="tab1">111111111111111 11111111111111111 1111111111111111111 1111111111111</div>
<div id="tab2">222222222222222 22222222222222222 2222222222222222222 2222222222222</div>
<div id="tab3">333333333333333 33333333333333333 3333333333333333333 3333333333333</div>
<div id="tab4">444444444444444 44444444444444444 4444444444444444444 4444444444444</div>

CSS

.tabs {
	border-bottom:3px #f2f2f2 solid;
}

.tabs li {
	list-style:none;
	display:inline;
	color:#08c;
}

.tabs a {
	padding:5px 20px;
	display:inline-block;
	background:#ffffff;
	text-decoration:none;
	color:#08c;
	top: 3px;
  	font-size: 22px;
  	line-height: 140%;
  	padding-top: 10px;
  	background: #ffffff;
  	box-sizing: border-box;
    position: relative;
    border-radius: 4px 4px 0 0;
    margin-bottom:3px;
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

}

.tabs a.active {
	background: #ffffff;
	border-bottom:3px orange solid;
  	color:#000000;
	top:0px;
}
.tabs a:hover {
  	background: #f2f2f2;
	top: 0px;
  	border-bottom:3px orange solid;
  	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#tab1, #tab2, #tab3, #tab4 {
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

JavaScript

// Wait until the DOM has loaded before querying the document
			$(document).ready(function(){
				$('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.attr('href'));

					// Hide the remaining content
					$links.not($active).each(function () {
						$($(this).attr('href')).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).attr('href'));

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

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