JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <ul>
        <li>shop by <span class="chevron">&#x2335;</span>
            <div class="content">
                <div class="cat">
                    <span class="header">Brands</span>
                    <ol>
                        <li>Adedash</li>
                        <li>Avana</li>
                        <li>Morricone</li>
                        <li>Nillan</li>
                        <li>Portofino</li>
                    </ol>
                </div>
                <div class="cat">
                    <span class="header">Category</span>
                    <ol>
                        <li>Bag</li>
                        <li>Clothes</li>
                        <li>Glasses</li>
                        <li>Shoes</li>
                    </ol>
                </div>
                <div class="cat">
                    <span class="header">Price</span>
                    <ol>
                        <li>100 - 200 $</li>
                        <li>200 - 300 $</li>
                        <li>300 - 400 $</li>
                        <li>400 - 500 $</li>
                        <li>500 $ and up</li>
                    </ol>
                </div>
                <div class="featured">
                    <span class="header">Featured</span>
                    <img src="http://www.shoeperwoman.com/wp-content/uploads/2010/10/dog-shoes.jpg" height="140" width="auto" alt="show" />
                    <div class="desc">Dog Shoe</div>
                    <div class="price">$ 329.00</div>
                </div>
            </div>
        </li>
        <li>pages <span class="chevron">&#x2335;</span>
            <div class="content">
                <div class="cat">
                    <span class="header">Some pages</span>
                    <ol>
                        <li>Home</li>
                        <li><a href="http://google.com">Google</a></li>
                        <li>Away</li>
                    </ol>
               ...

CSS

#menu {width: 100%; height: 30px; border-bottom: 1px solid #cecece; position: relative; top. 0; left:0;}
#menu ul {list-style:none; font-family: helcetica, arial, verdana, sans-serif}
#menu ul > li {text-transform: uppercase; float:left; letter-spacing: 0.06em;
    font-size: 22px; font-weight: bold; padding: 3px 30px 3px 0; line-height: 24px; color: grey; cursor: pointer;
}

.chevron {font-size: 28px; text-align: justify; line-height: 18px;}
.content {position: absolute; top: 30px; left: 0; height: 270px; width: 800px;;
    box-shadow: 5px 5px 10px #747474; display:none; border-top: 1px solid #cecece;
}
.content img {top: 25px; position: relative; left: 100px; float:left;}
.content > span {font-size: 13px; color: grey; position: relative; top: 30px; left: 120px; width: 300px; text-transform: none; float:left;}

#menu ul > li:hover {color: orange;}
#menu ul > li:hover .content {display: block; }

.header {font-size: 18px; color: orange;}

.cat {font-size: 15px; float: left; margin: 40px 20px 0 40px;}
.cat ol {list-style:none; position: relative; top: 10px; left: 0; margin: 0; padding: 0;}
.cat ol li, .cat ol li a {text-transform: none; color: grey; font-weight: lighter; text-decoration: none;}

.cat ol li:hover, .cat ol li:hover a {color: #ad600a}

.featured {position: relative; float: right; border-left: 1px solid #cecece; width: 250px; height: 90%; top: 5%;
    text-align: center; color: orange; font-size: 18px;
}
.featured span {position: relative; top: 30px;}
.featured img {height: 140px; left: 30px; clear: both; margin: 0 0 30px 0;}

.desc {color: #000; font-weight: bold; font-size: 14px; width: 100%; clear: both; }
.price {color: grey; font-size: 15px;}