JSFiddle - React, Tailwind, and code Playground

by nns2009

HTML

<div class="leftSections">
    <div class="leftSectionsTitle">
        <a href="#">
            This is a title
        </a>
    </div>
    
    <div class="leftSectionsLeft">
        <ul>
            <li><a href="#">Point 1</a></li>
            <li><a href="#">Point 2</a></li>
            <li><a href="#">Point 3</a></li>
            <li>Point 4</li>
            <li>Point 5</li>
            <li>Point 6</li>
        </ul>
    </div>
    
    <div class="leftSectionsRight">
        <ul>
            <li>Right 1</li>
            <li>Right 2</li>
            <li>Right 3</li>
            <li>Right 4</li>
            <li>Right 5</li>
            <li>Right 6</li>
        </ul>
    </div>
</div>

CSS

.leftSectionsTitle {
    background: #ccccff;
    margin: 0 auto;
    width: 100px;
    text-align: center;
}

.leftSections {
    background: #eeeeee;
    width: 300px;
}

.leftSectionsLeft {
    background: #ffcccc;
    width: 50%;
    float: left;
    text-align: center;
}

.leftSectionsRight {
    background: #ccffcc;
    width: 50%;
    float: right;
    text-align: center;
}