JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div id="footer">
     <h5>Quick Links</h5>

    <ul id="quick-links">
        <li><a href="#">Feedback</a>
        </li>
        <li><a href="#">Homestead Request Form</a>
        </li>
        <li><a href="#">Update Mailing Address</a>
        </li>
        <li><a href="#">IA Dept Of Revenue</a>
        </li>
        <li><a href="#">Property Search</a>
        </li>
        <li><a href="#">County Auditor</a>
        </li>
        <li><a href="#">Random Item 7</a>
        </li>
    </ul>
</div>

CSS

#footer {
    border: 1px solid #ccc;
    /* using a fixed width layout, could use fluid and percentages */
    width: 600px;
}
ul#quick-links {
    list-style-type: none;
    width: 100%;
    /* Remove ul indentation */
    padding-left: 0;
}
ul#quick-links li {
    display: inline-block;
    margin: 0 5px 5px 5px;
    /* Set the width explicitly so we can get the correct number of columns */
    width: 185px;
}