JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Notes -->
<!-- index.html -->


<!doctype html>
<html class="no-js" lang="en">
	
<head>
	<meta charset='UTF-8'>
	<link rel="stylesheet" href="css/style.css" />
	
	<title>Notes</title>

	<style>
    .tabs {
      position: relative;   
      min-height: 750px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: #eee; 
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
    }
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      display: block; overflow-y:scroll; overflow-x:hidden;
    }
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
	</style>	
</head>
	
<body>

	<!-- Navagation -->
	<div id='cssmenu'>
	<ul>
   		<li><a href="index.html"><span>Home</span></a></li>
   		<li><a href="maya.html"><span>Maya</span></a> </li>
   		<li class='last'><a href="zbrush.html"><span>zBrush</span></a></li>
	</ul>
	</div>

	<!-- Start Tabs Container -->
	<div id="page-wrap">
		<!-- Create Tabs container -->
    	<div class="tabs">
        
        <!-- Start Tabs content -->
        
        	<!-- 1st Tab -->
        	<div class="tab">
        	   <input type="radio" id="tab-1" name="tab-group-1" checked>
               <label for="tab-1">Modeling</label>
           
           		<div class="content">
               		<div>      

   			         <!-- Vertical Accordion #1-->
	
					<div class="accordion vertical">
					  <section id="header1">
						  <h2><a href="#header1"><b><u>Modeling (General):</b></u></a></h2>
						  <ul>
						  	<li><b>Tips:</b>
							<ul><li>- Apply to object with:...

CSS

/**
 * 	Notes
 * 	style.css
 */
ul li ul li{margin:0 30px;}
/** ---------------------------------------------------------------------------------------------------------------------- */
/** General */
 * {
  margin: 0;
  padding: 0;
}

/** ---------------------------------------------------------------------------------------------------------------------- */
/** Menu bar */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
  background: #3d3b3b;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  float: left;
  display: block;
  padding: 0;
}
#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 15px 25px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #cssmenu ul li...