JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="header">
    <div class="title">Pollution Watch</div>
    <div class="menu">
        <ul>
            <li><a href="#">File</a></li>
              <li><a href="#">Edit</a></li>
              <li><a href="#">Window</a></li>
        </ul>
    </div>
    <div class="dropDown">
        hello
    </div>
</div>

SCSS

.header {
    margin:0;
    padding:0;
}

.title {
    padding:4px;
    text-align: center;
    background:#3A539B;
    color:white;
}
.menu {
    ul {
        width:100%;
        background: #e3e3e3;
        list-style-type: none;
        border-bottom:1px solid #999;
        border-top:1px solid #999;
    }
    li {
        margin:0;
        padding:0;
        display:inline;
        a {
            font-size:12px;
            display:inline-block;
            text-decoration: none;
            padding:4px 4px;
            color:#999;
            text-shadow:1px 1px 1px white;
            font-family:Sans-Serif;
            &:hover {
                color:black
            }
        }
    }
}
.dropDown {
    display:none;
    padding:5px;
    margin:0;
    background: #e3e3e3;
    border:1px solid #999;
    border-top: 0;;
    width:200px;
    margin-top: -1px;;
     font-size:12px;
     color:#999;
            font-family:Sans-Serif;
}