JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
      <ul>
        <li><a href="#" class="title">Loja</a></li>
      </ul>
      <ul class="right">
      <li><a href="#" class="user">username</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </header>

    <main>
      <aside>
        <ul>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
        </ul>
      </aside>

      <article>
      </article>
    </main>
  </body>

CSS

@import url(https://fonts.googleapis.com/css?family=Oxygen+Mono|Special+Elite|Luckiest+Guy|Slabo+27px|Open+Sans);
html, body {
  margin:0;
  padding:0;
}
header {
  top: 0;
  left: 0;
  background-color: #333;
  width:100%;
}

header:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    float: left;
}

header ul.right {
  float: right;
}

header li {
  float: left;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

aside ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

aside li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
    font-family: 'Special Elite', cursive;
}

/* Change the link color on hover */
aside li a:hover {
    background-color: #555;
    color: white;
}

aside li.active {
    background-color: #4CAF50;
}

.title {
  font-family: 'Luckiest Guy', cursive;
}

.user {
  font-family: 'Slabo 27px', serif;
}

div.main {
  font-family: 'Open Sans', sans-serif;
}

button {
	overflow: visible;
	width: auto;
}

button.link {
	font-family: "Verdana" sans-serif;
	font-size: 1em;
	text-align: left;
	color: blue;
	background: none;
	margin: 0;
	padding: 0;
	border: none;
	cursor: pointer;
  -moz-user-select: text;
}

button.link span {
	text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
	color: black;
}