JSFiddle - React, Tailwind, and code Playground
by Haze32
HTML
<div class="topicPart">
<ul>
<li>
<a href="/coaching" target="HW_Mainframe">Coaching</a>
<span class="objectAttributes">
<span class="desc">Phasellus ac eros at urna condimentum lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Sed bibendum, sapien a venenatis fermentum, mauris augue
cursus turpis, vitae elementum massa orci sit amet massa. In hac
habitasse platea dictumst.</span>
</span>
<ul>
<li>
<a
href="/coaching/coaching-for-new-parents.html"
target="HW_Mainframe"
>Coaching for new parents</a
>
</li>
<li>
<a href="/coaching/coaching-program.html" target="HW_Mainframe"
>Coaching Program</a
>
</li>
<li>
<a
href="/coaching/Partner%20Coaching%20Information%20Sheet%28100170877.1%29.docx"
target="HW_Mainframe"
>Information Sheet <img
src="/wavemaster.internal/webapp/uistyle/hwdefault/icons/msword.png?cachekeY=683bfd46-en-hwdefault0"
title="Word 2010"
border="0"
/></a>
</li>
<li>
<a href="/coaching/library-of-bios.html" target="HW_Mainframe"
>Library of bios</a
>
</li>
</ul>
</li>
<li>
<a href="/meetings" target="HW_Mainframe">Meetings</a>
<ul>
<li>
<a href="/meetings/2025-annual-partners-meeting" target="HW_Mainframe"
>2025 Annual Partners Meeting</a
>
</li>
</ul>
</li>
<li>
<a href="/New%20Partner%20Development%20Program" target="HW_Mainframe"
>New Partner Development Program</a
>
<ul>
<li>
<a
href="/New%20Partner%20Development%20Program/agenda.html"
...
CSS
.topicPart ul {
padding: 0;
list-style: none;
margin: 0;
}
.topicPart > ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
box-sizing: border-box;
padding: 0 !important;
list-style: none !important;
margin: 0 !important;
}