JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Correct</h1>
<ul class="items list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

<h1>WRONG</h1>
<ul class="problem">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

CSS

/* OR better shorter name...*/
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}


/*VISUALS*/
.problem li,
.list li{background: red;}
.problem li{display:inline-block;}