JSFiddle - React, Tailwind, and code Playground

by MD RAHMAN

HTML

<!DOCTYPE html>
<html>

<head>
	<meta charset='UTF-8'>
	
	<title>Round Out Tabs</title>
	
	<link rel='stylesheet' href='css/style.css'>
	
	<style>
    body { 
    	background: #222; 
    }
    #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; 
		}
		.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: white; 
		  
		  /* Squares below circles */
		  z-index: 1;
		}
		/* Squares */
		.tabs li:before, .tabs li:after {
		  background: #ddc385;
		  width: 10px;
		  height: 10px;
		}
		.tabs li:before {
		  left: -10px;...

CSS

* { 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;
}