JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

<body class="home page page-id-3393 page-template page-template-template-pagecreator page-template-template-pagecreator-php logged-in admin-bar no-customize-support">

<!-- to top button -->
<div id="toTop">Go to Top</div>
<!-- end to top button -->

<div id="wrap" class="container clearfix" data-role="page">
<header id="header" class="fluid clearfix" data-role="header">
  <div class="container">
    <div id="logo"> <a href="https://www.orsgroup.com.au/" title="The ORS Group"><img id="sitelogo" src="https://www.orsgroup.com.au/wp-content/uploads/2014/03/ORS-Group-Logo.png"></a> </div>
    <div class="h-right" style="margin-top:0px"> 
      <!-- Tagline --> 
      <span class="top-header-tagline"> </span><!-- Top Header Tagline --> 
    </div>
  </div>
</header>
<!--/#header-->
<div class="clear"></div>
<div class="nav-wrap-primary">
  <div class="container">
    <nav>
      <ul>
        <li><a href="#" class="ors">Link 1</a></li>
        <li><a href="#" class="ors">Link 1</a></li>
        <li><a href="#" class="ors">Link 1</a></li>
        <li><a href="#" class="ors">Link 1</a></li>
        <li><a href="#" class="ors">Link 1</a></li>
      </ul>
    </nav>
  </div>
</div>
<div class="clear"></div>
<div id="content-wrap" class="fluid clearfix" data-content="content">
  <aside role="complementary" class="two columns" id="menusidebar">
    <ul>
      <li><a href="#">Grief and Loss</a></li>
      <li><a href="#">Depression</a></li>
      <li><a href="#">Couples and Relationship Issues</a></li>
      <li><a href="#">Lorem ipsum dolor2</a></li>
      <li><a href="#">Lorem ipsum dolor</a></li>
      <li><a href="#">Lorem ipsum dolor</a></li>
      <li><a href="#">Lorem ipsum dolor2</a></li>
      <li><a href="#">Lorem ipsum dolor</a></li>
    </ul>
  </aside>
  <!-- /#start content-wrap -->
  <div id="content" class="seven columns">
    <section id="post-3393" class="post-3393 page type-page status-publish has-post-thumbnail hentry">
      <p><a href="index.html">Back...

CSS

@charset "utf-8";
/*
Theme Name: The ORS Group EAP Portal
Version: 1.0
Author: Steven Doig
Author URI: https://websitetechnology.com.au
Description: An Agency / Blog / Portfolio / Business Theme
*/

body {
    color: #666666;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    background: url(images/bg-repeat.png) repeat-x scroll 0 0 transparent;
	padding: 0;
	margin: 0;
}
body > #wrap {
    height: auto;
    min-height: 100%;
}
#wrap {
    padding: 0;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    -ms-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6);
    width: 990px;
	background-color: #FFF;
}
#header {
    padding: 30px 0 65px;
}
.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

/* Navigation Primary */

.nav-wrap-primary {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8ad6e3+0,4ebfd3+100 */
	background: #8ad6e3; /* Old browsers */
	background: -moz-linear-gradient(top,  #8ad6e3 0%, #4ebfd3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #8ad6e3 0%,#4ebfd3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #8ad6e3 0%,#4ebfd3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ad6e3', endColorstr='#4ebfd3',GradientType=0 ); /* IE6-9 */
    border: 1px solid #36B7CD;
    box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;
	margin: 0;
}
.nav-wrap-primary .container {margin: 0;}
.nav-wrap-primary ul {
	margin: 0;
	padding: 0;
	list-style-type: 0;
	display: flex;
}
.nav-wrap-primary ul li {
	display: inline-block;
    text-align: left;
}
.nav-wrap-primary ul li a {
    border-left: 1px solid...