JSFiddle - React, Tailwind, and code Playground

by austinfrance

HTML

<!--
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
<div id="app">
  <div id="PatcherApp">
    <div id="Header">
      <ul>
        <li data-route="0" >Camelot Unchained</li>
        <li data-route="1" >Patch Notes</li>
        <li data-route="2" >News</li>
        <li data-route="3" >Support</li>
        <li data-href="http://camelotunchained.com/v2/">Getting Started</li>
        <li data-href="http://camelotunchained.com/v2/">CSE Store</li>
        <li data-route="4" >Chat</li>
      </ul>
    </div>
    <div id="Sidebar" >
      <div class="content" >
        <h2 >Sidebar</h2>
        <p > Side bar stuff </p>
      </div>
    </div>
    <div id="Content" >
      <div id="PatchNotes" >
        <h2 >PatchNotes</h2>
        <p >content</p>
      </div>
    </div>
    <div id="Footer" >
    </div>
  </div>
</div>

CSS

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
html, body, #app {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  overflow: hidden; 
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px; 
}

::-webkit-scrollbar-track {
  background: transparent; 
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); 
}

h4 {
  margin: 0; 
}

#PatcherApp {
  display: flex;
  flex-flow: column;
  height: 100%; 
}

#Header {
  flex: 0 1 65px;
  background: rgba(0, 0, 0, 0.25);
  padding: 5px; 
}

#Header ul {
  margin: 30px 0px 0px 0px;
  padding: 0;
  list-style: none;
  float: right; 
}

#Header ul li {
  padding: .2em 1em;
  display: inline;
  color: white;
  cursor: pointer; 
}

#Sidebar {
  position: absolute;
  top: 85px;
  left: 20px;
  background: rgba(0, 200, 75, 0.25); 
}

#Sidebar .content {
  width: 200px;
  margin: 10px; 
}

#Content {
  flex: 1 1 auto;
  background: rgba(175, 0, 50, 0.25);
  text-align: center;
}

#Footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 255, 0.25); 
}