JSFiddle - React, Tailwind, and code Playground

by Fransiskus Fallo

CSS

<style type="text/css">
#tabbed-toc {
  border:1px solid #2aa4cf;
  margin:0 auto;
  background-color:#fff;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#666;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 11px Coda,Coda;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Coda,Coda;
  border-radius: 1em 4em 1em 4em;solid #2aa4cf;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#666;
  text-transform:Normal;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#2aa4cf;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#2aa4cf;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:#fff;
  border-left:2px solid #2aa4cf;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Coda;
}
#tabbed-toc .panel li a {
  display:block;
  border-radius: 1em 4em 1em 4em;solid #2aa4cf;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#555;
  line-height:20px;
  height:20px;
 ...