JSFiddle - React, Tailwind, and code Playground

HTML

<header>
		<nav>
			<ul>
				<li><a href="#">Header1</a></li>
				<li><a href="#">Header2</a></li>
				<li><a href="#">Header3</a></li>
			</ul>
		</nav>
	</header>

	<aside>
		<nav>
			<ul>
				<li><a href="#">Aside1</a></li>
				<li><a href="#">Aside2</a></li>
				<li><a href="#">Aside3</a></li>
			</ul>
		</nav>
	</aside>

	<article>
		<h1>SASS 샘플</h1>
	</article>

CSS

header {
  background-color: #eee;
  display: block;
  height: 100px; }
  header nav ul {
    list-style: none;
    float: right; }
    header nav ul li {
      display: inline-block; }
      header nav ul li a {
        display: block;
        padding: 5px 3px;
        margin: 10px 20px;
        text-decoration: none;
        color: #999; }
        header nav ul li a:hover {
          border-bottom: 1px dotted #009ac8; }

aside {
  width: 250px;
  float: left; }
  aside nav ul {
    list-style: none;
    padding: 0;
    margin-top: 30px; }
    aside nav ul li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: #999;
      width: 100px; }
      aside nav ul li a:hover {
        border: 1px solid #382494;
        color: #ff0000; }

/*# sourceMappingURL=sass_test.css.map */