JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shortcuts">
    <ul>
        <li><a href="#">Categories</a></li>
        <li><a href="#archives">Archives testestste</a></li>
    </ul>
</div>

CSS

#header {
    width: 100%;
    height: 180px;
    background-color: #666;
    color: #fff;
}

#shortcuts { position: absolute; z-index: 20; top: 0; left: 0; right: 0; }

#shortcuts ul {
    display: table;
    width:100%;

    height: 180px; /* for testing only */
}

#shortcuts ul li {
    list-style: none;   
    display: table;
    height: 60px;
    width:100%;
    /*display: block; */
    vertical-align: middle;

    background-color: red;   /* for testing only */
    border: blue 3px solid;  /* for testing only */
}

#shortcuts ul li a {
    width: 100%;
    height: 60px;       
    text-decoration: none;
    display: block; 
    line-height:60px;
    vertical-align: middle;
    
    border: 2px dashed green; /* for testing only */
}