JSFiddle - React, Tailwind, and code Playground

by Guillermo Ignacio Enriquez Gutierrez

HTML

<div id="boxtab-blue">
	<ul>
		<li class="first"><a href="#item1">Home Page</a></li>
		<li class="active"><a href="#item2">Our Products</a></li>
		<li><a href="#item3">About Us</a></li>
		<li class="last"><a href="#item4">Contact Us</a></li>
	</ul>
    <div class="tabInner">
            <div id="item1">
                bla1
            </div>
            <div id="item2">
                bla2
            </div>
            <div id="item3">
                bla3
            </div>
            <div id="item4">
                bla4
            </div>

        </div>
</div>

CSS

/* General styles */
	body {
		margin:0;
		padding:0;
		border:0;
		width:100%;
		background:#fff;
		font-size:90%;
	}
	h1, h2, h3, p {
		padding-left:20px;
		clear:left;
	}
	h2 {
		padding-top:30px;
	}

	#boxtab-blue {
		clear:left;
		float:left;
		padding:0;
		background:#fff url(boxtab-blue.gif) bottom repeat-x;
		width:100%;
		overflow:hidden;
		font-family:Verdana, Geneva, sans-serif;
	}
	#boxtab-blue ul {
		float:left;
		margin:0;
		padding:0;
		list-style:none;
		position:relative;
		left:50%;
		text-align:center;
	}
	#boxtab-blue ul li {
		display:block;
		float:left;
		list-style:none;
		margin:20px 0 0 0;
/*        margin-bottom: -1px;*/
		padding:0;
		position:relative;
		right:50%;
	}
	#boxtab-blue ul li a {
		display:block;
		float:left;
		margin:0 1px;
		padding:5px 10px;
		background:#fff;
		text-decoration:none;
		color:#000;
		border-top:1px solid #369;
		border-left:1px solid #369;
		border-right:1px solid #369;
        /*border-bottom:1px solid #369;*/
		position:relative;
		bottom:1px;
	}
	#boxtab-blue ul li a:hover {
		background:#30f;
		color:#fff;
	}
	#boxtab-blue ul li.active {
/*		margin-top:10px;*/
        border-bottom: none;
        margin-bottom: -1px;
        padding-bottom: 3px;
	}
	#boxtab-blue ul li.active a,
	#boxtab-blue ul li.active a:hover {
	    border-bottom:none;
		position:relative;
		bottom:0;
/*		padding:10px;*/
		background:#fff;
		color:#000;
		font-weight:bold;
	}

.tabInner {
    clear: both;
    border: 1px solid #aaa;
    height: 200px;
    overflow: hidden;
    background: #eee;
}

.tabInner div {
    height: 200px;
    padding: 10px;
}