JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<header>
        <img src="img/logo.png" height="70px" class="logo">
        <ul class="mu">
            <li><a href="#">CART</a></li>
            <li><a href="#">HELP</a></li>
            <li><a href="#">ABOUT</a></li>
                <li><a href="#">WOMENS</a></li>
            <li><a href="#">MENS</a></li>
            <li><a href="#">KIDS</a></li>
            <li><a href="#">SOLD</a></li>
        </ul>

CSS

*{margin: 0;padding: 0;}
ul li menu {list-style: none;}
a {text-decoration: none;}
body {background: #c0c0c0}
header {background: #006294;height: 100px;font-size: 18px}
.logo {
    float: left;
    padding: 15px 0 15px 100px; 
}
ul>li {
 
}
ul>li>a {color: #fafef9;}
ul>li>a:hover {color: #ff8b34;}
.mu li {
    list-style: none;
    float: right;
    display: inline-block;
    padding: 15px 4% 0 0;
}
.mu>li>a {float: left;}
.md li {
    list-style: none;
    float: right;
    display: inline-block;
    padding: 30px 35% 0 0;
}