JSFiddle - React, Tailwind, and code Playground

HTML

<p>TIL that whitespace in html adds 1px to the element</p>
<ul>
    <li></li>
    <li></li>
    <li class="no-margin">fgxfgf</li>
</ul>

<p> Below list is the same without whitespace in the html</p>
<ul>
    <li></li><li></li><li class="no-margin"></li>
</ul>

CSS

/* Make sure padding and margins aren't the culprits */
* { box-sizing:border-box; margin: 0; padding: 0;}

/* The Important Part */
ul { width:620px; }

li {
    display:inline-block;
    width:200px;
    height:50px;
    margin-right:10px;
}

li.no-margin { margin-right:0; }

/* Just some presentational styles to make it easier to demo */
ul { background-color:rgba(255,0,0, 0.2); padding-top: 5px; padding-bottom:5px;}
li {background-color:rgba(255,0,0, 0.5);}
p { margin:5px 0; }