JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<ul class="tabs group">
  <li class="active"><a href="#one">One</a></li>
  <li class=""><a href="#two">Two</a></li>
  <li class=""><a href="#three">Three</a></li>
  <li class=""><a href="#three">Four</a></li>
</ul>
<div id="one" class="tabDivs">
  Joe
</div>
<div id="two" class="tabDivs hidden">
  Jerald
</div>
<div id="three" class="tabDivs hidden">
  John
</div>
<div id="four" class="tabDivs hidden">
  Joseph
</div>

CSS

/*
	 CSS-Tricks Example
	 by Chris Coyier
	 http://css-tricks.com
*/

* {
  margin: 0;
  padding: 0;
}

body {
  font: 14px Georgia, serif;
}

h1 {
  width: 660px;
  margin: 0 auto;
  padding: 20px 0;
  color: #222;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}

body {
  background: none;
}

#content {
  background: white;
  min-height: 400px;
}

.tabs {
  list-style: none;
  margin: 60px auto 0;
  width: 660px;
}

.tabs li {
  /* Makes a horizontal row */
  float: left;
  /* So the psueudo elements can be
			   abs. positioned inside */
  position: relative;
}

.tabs a {
  /* Make them block level
		     and only as wide as they need */
  float: left;
  padding: 10px 40px;
  text-decoration: none;
  /* Default colors */
  color: black;
  background: #ddc385;
  /* Only round the top corners */
  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 15px;
  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 15px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.tabs .active {
  /* Highest, active tab is on top */
  z-index: 3;
}

.tabs .active a {
  /* Colors when tab is active */
  background: white;
  color: black;
  border-left: 1px solid #ddc385;
  border-right: 1px solid #ddc385;
  border-top: 1px solid #ddc385;
}

.tabs li:before,
.tabs li:after,
.tabs li a:before,
.tabs li a:after {
  /* All pseudo elements are
		     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}


/* Only the first, last, and active
		   tabs need pseudo elements at all */

.tabs li:last-child:after,
.tabs li:last-child a:after,
.tabs li:first-child:before,
.tabs li:first-child a:before,
.tabs .active:after,
.tabs .active:before,
.tabs .active a:after,
.tabs .active a:before {
  content: "";
}

.tabs .active:before,
.tabs .active:after {
  background: #ddc385;
  /* Squares below circles */
  z-index: 1;
}


/* Squares */

.tabs...

JavaScript

$("li").click(function(e) {
  e.preventDefault();
  $("li").removeClass("active");
  $(this).addClass("active");
  $(".tabDivs").addClass("hidden");
  //console.log(e);
  var id = e.target.hash;
  //console.log(id);
  $(id).removeClass("hidden");
});