JSFiddle - React, Tailwind, and code Playground

by Stephen Kim

HTML

<!DOCTYPE html>
	<body>
		<div class="tabwrapper group">
			<div class="triangleman"></div>
			<div class="triangleborder"></div>
			<div class="smallerwrapper group">	
				<div class="max"></div>
				<div class="navtext">Tab Name</div>
				<div class="max"></div>	
			</div>
			<div class="trianglerightborder"></div>
			<div class="trianglerightman"></div>
		</div>
	</body>
</html>

CSS

body {
background-color: #CFCFCF;
}
div {
	font-family: Verdana;
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.tabwrapper {
	width: 300px;
}
.smallerwrapper {
	background: #333333; /* Old browsers */
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), color-stop(0.33, #333333), color-stop(0.45, #393939), color-stop(0.47, #3c3c3c), color-stop(0.61, #454545), color-stop(0.67, #4d4d4d), color-stop(0.73, #505050), color-stop(0.75, #545454), color-stop(0.76, #545454), color-stop(0.9, #606060), to(#646464));
	background: -webkit-linear-gradient(#333333 0%, #333333 33%, #393939 45%, #3c3c3c 47%, #454545 61%, #4d4d4d 67%, #505050 73%, #545454 75%, #545454 76%, #606060 90%, #646464 100%);
	background: -moz-linear-gradient(#333333 0%, #333333 33%, #393939 45%, #3c3c3c 47%, #454545 61%, #4d4d4d 67%, #505050 73%, #545454 75%, #545454 76%, #606060 90%, #646464 100%);
	background: -o-linear-gradient(#333333 0%, #333333 33%, #393939 45%, #3c3c3c 47%, #454545 61%, #4d4d4d 67%, #505050 73%, #545454 75%, #545454 76%, #606060 90%, #646464 100%);
	background: linear-gradient(#333333 0%, #333333 33%, #393939 45%, #3c3c3c 47%, #454545 61%, #4d4d4d 67%, #505050 73%, #545454 75%, #545454 76%, #606060 90%, #646464 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#646464',GradientType=0 ); /* IE6-9 */
	color: #FFFFFF;
	border: 2px solid #333333;
	float: left;
	width: 147px;
	padding-left: 12px;
	position: relative;
	left: -47px;
	z-index: -10;
}
.max {
	width: 0; 
	height: 0; 
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #FFFFFF;
	float: left;
	margin-top: 6px;
	margin-left: 5px;
	margin-right: 5px;
}
.navtext {
	float: left;
}
.triangleman {
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 23px 23px 0 0;
	border-color: #333333...