JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sub">
    <div class="sub-menu">
        <ul class="menu">
             <h3>Header</h3>

            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
            <li class="menu-item">Some Text</li>
        </ul>
    </div>
    <div class="img-menu">
        <ul class="img-ul">
            <li class="img-menu-list"><a href="">
    <img src="https://placehold.it/250x140" alt=""></a>

            </li><li class="img-menu-list"> <a href=""><img src="https://placehold.it/250x140" alt=""></a>

            </li><li class="img-menu-list"> <a href=""><img src="https://placehold.it/250x140" alt=""></a>

            </li>
        </ul>
    </div>
</div>

CSS

.sub {
     position: absolute;
     background: skyblue;
     width: 1000px;
     height: 200px;
 }
 .sub-menu {
     width: 250px;
 }
 .sub-menu li {
     float: left;
     width: 48%;
     background: blue;
     margin: 0 0 2% 2%;
 }
 .img-menu {
     width: 700px;
     background: pink;
     float: right;
     margin: 0;
     padding: 0;
 }
 .img-ul {
     margin: 0;
     padding: 0;
 }
 .img-menu-list {
     display: inline-block;
     margin: 0;
     padding: 0;
     width:33%;
 }
 .img-menu-list a img {
     width: 70%;
     margin:0;
     padding:0;
 }