JSFiddle - React, Tailwind, and code Playground

by Paulie_D

HTML

<div class="container">
            <div class="menu">
                <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item2</a></li>
                    <li><a href="#">item3</a></li>
                    <li><a href="#">item4</a></li>
                    <li><a href="#">item5</a></li>
                    <li><a href="#">item6</a></li>
                </ul>
    </div>
    <div class="content">It's me, Mario!</div>
</div>

CSS

*, body {
    margin: 0;
    padding: 0;
}

.container {
    width:50%;
    margin: 0 auto;
    background:lightgreen;
    height:300px;
}
ul {
    background: #afafaf;
    position: relative;
    border:1px solid green;
}

ul:before {
    content: '';
    position: absolute;
    height: 100%;
    background: inherit;
    width: 100vw;
    left:50%;
    transform:translateX(-50%);
    z-index:-1
}
li {
    display:inline-block;
}