JSFiddle - React, Tailwind, and code Playground

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>
</ul>
<div id='tab1'>
    <p>Hi, this is the first tab.</p>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='300'>
</div>
<div id='tab2'>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='200'>
    <p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='400'>
    <p>And this is the 3rd tab.</p>
</div><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>
</ul>
<div id='tab1'>
    <p>Hi, this is the first tab.</p>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='300'>
</div>
<div id='tab2'>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='200'>
    <p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='400'>
    <p>And this is the 3rd tab.</p>
</div>

CSS

body {
			    margin: 0;
			    background-color: #eeeeff;
			    padding:5px 5px;
			    font-family:sans-serif;
			    font-size:14px;
			}
            ul {margin: 0; padding: 0;}
			p, h3 {
			    margin-bottom:10px;

			}

			div {
			    padding:2px 14px;
			    width:600px;
			    background:#fff;
			}

			.tabs li {
			    margin: -10px 0;
                padding: 0;
			    list-style:none;
			    display:inline;
			}

			.tabs a {
			    padding:5px 5px;
			    display:inline-block;
			    background:#666;
			    color:#fff;
			    text-decoration:none;
			}

			.tabs a.active {
			    background:#fff;
			    color:#000;
			}

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();
					});
				});
			});