JSFiddle - React, Tailwind, and code Playground
CSS
$default_color: #999;
$hover_color: #009ac8;
$header_back: #f7f7f2;
$aside_hover: #182383;
body {
margin: 0;
padding: 0;
}
nav {
ul {
list-style: none;
float: right;
li {
display: inline-block;
a {
display: block;
margin: 10px 20px;
padding: 5px 3px;
text-decoration: none;
color: $default_color;
&:hover {
border-bottom: 1px dotted $hover_color;
color: $hover_color;
}
}
}
}
}
header {
background-color: $header_back;
height: 100px;
@extend nav;
}
aside {
width:250px;
float: left;
@extend nav;
ul {
padding: 0;
margin-top: 30px;
float: left;
li {
display: block;
a {
padding: 5px 10px;
margin: 0;
width: 100px;
&:hover {
border: 1px solid $aside_hover;
color: $aside_hover;
}
}
}
}
}