JSFiddle - React, Tailwind, and code Playground
by rdenver6
SCSS
.prologisHeader {
background-color: #fff;
border-bottom:1px solid #eaeaea;
color: #1b4d4a;
height:40px;
.headerContainer {
margin: 0px 14px;
width: 100%;
display: flex;
> .topNavItem {
flex: 0 1 auto;
font-weight:600;
padding-left:20px;
padding-top:10px;
> a {
color: #1b4d4a;
margin-right: 30px;
text-decoration: none;
text-transform: uppercase;
}
> span {
display:inline-block;
height:50px;
text-transform: uppercase;
}
}
.toggleDown,
.toggleUp {
display: none;
img {
padding-top:10px;
}
}
/*
.toggle {
display: none;
}
.logo {
flex-shrink: 0;
display: flex;
margin-right: 20px;
align-items: center;
a {
color: #1b4d4a;
text-decoration: none;
img {
float: left;
height: 30px;
}
span {
font-size: 26px;
padding-left: 15px;
}
@media screen and (max-width: 639px) {
img {
height: 30px;
}
span {
font-size: 20px;
}
}
}
}
.toggleLabel {
display: none;
}
*/
.menu {
align-items: baseline;
height: 50px;
display: flex;
flex: 1;
flex-direction: row;
justify-content: flex-start;
list-style-type: none;
padding: 0;
position: relative;
.topNavItem {
flex: 0 1 auto;
padding-top:10px;
> a {
color: #1b4d4a;
margin-right: 30px;
text-decoration: none;
text-transform: uppercase;
}
> span {
display:inline-block;
height:50px;
text-transform: uppercase;
}
/*
&:first-child span {
font-size:21px;
...