JSFiddle - React, Tailwind, and code Playground

by Dinesh Patra

HTML

<div id="header">
	    <h1>Header Part</h1>
	</div>
	<div class="container">
	     <ul class="tabs">
	        <li>
	           <a class="active" 
	              href="javascript:void(0);" 
	              data-url="#content1">
	               <div>Tab1</div>
	            </a>
	         </li>
	         <li>
	           <a href="javascript:void(0);" 
	              data-url="#content2">
	               <div>Tab2</div>
	            </a>
	         </li>
	         <li>
	           <a href="javascript:void(0);" 
	              data-url="#content3">
	               <div>Tab3</div>
	            </a>
	         </li>
	    </ul>
	    <section id="content1">
	        some content 1
	    </section>
	    <section id="content2" >
	       some content 2
	    </section>
	    <section id="content3" >
	       some content 3
	    </section>
	</div>

CSS

#header { 
	    border-bottom: black 1px solid;
	}
	section {
	    display: none;
	    height: 500px;
	    border: black 2px solid;
	}

	section:first-of-type {
	    display:block;
	}

	ul.tabs {
	    list-style: none;
	    text-align: center;
	}

	ul.tabs li {
	    display: inline-block;
	}

	ul.tabs li a {
	    display: inline-block;
	    width: 100px;
	    margin-right: 25px;
	    margin-bottom: 25px;
	    padding: 5px 5px 5px 5px;
	    background-color: #ffffff;
	    border: 1px;
	    border-style: solid;
	    border-color: #000000;
	    text-align: center;
	    text-decoration: none;
	    color: #000000;
	}

	ul.tabs li a:hover {
	    color: #349cf0;
	}

	ul.tabs li a.active {
	    color: #349cf0;
	}
	.content {
	    margin-top: 
	}

JavaScript

$(document).ready(function(){
	    $('.tabs').on('click', 'a', function(){
    	    $('section').hide();
            $($(this).attr('data-url')).show();
            var $this = $(this),
            $ul = $this.parents('ul');
            $ul.find('a').removeClass('active');
            $this.addClass('active');
        }); 
    });