JSFiddle - React, Tailwind, and code Playground

by mhouser_nowmediagroup

HTML

<body id="web3_webapp">
  <header id="menu">
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>
  <main id="interface">
    <section></section>
    <footer></footer>
  </main>
  <footer id="footer">
    <script type="text/javascript"></script>
  </footer>
</body>

SCSS

html, body {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

body {

  > *:not(script) {
    display: block;
    padding: 2px;
    outline: solid 2px #333;
  }
  > header {
    height: 50px;
    outline-color: blue;
    > nav, nav > ul, nav > ul > li {
      height: 100%;
      width: 100%;
    }
    > nav {
      background: blue;
      > ul {
        padding: 0px;
        margin: 0px;
        li {
          display: inline-block;
          float: left;
          width: 20%;
          padding: 0px;
          margin: 0px;
          outline: solid 2px orange;
        }
      }
    }
  }
}