JSFiddle - React, Tailwind, and code Playground

by paislee

HTML

<div id="outer">
    <ul>
        <li>Item ONE</li>
        <li>Item TWO</li>
        <li>Item THREE</li>
    </ul>
</div>

CSS

#outer {
    background: red;
    height: 25px;
    text-align: center;
    width: 100%;
}
#outer ul { /*acts as wrapper container*/
    background: yellow;
    height: 25px;
    margin: 0 auto;
    width: 320px;
}
#outer ul li {
    background: green;
    float: left;
    margin-right: 5px;
    width: 100px;    
}
#outer ul li:first-child {
    margin-left: 5px;
}