JSFiddle - React, Tailwind, and code Playground

by Donal Devine

HTML

<div id="container">
   <div>test 1</div>
   <div>tes 2</div>
   <div>test 3</div>
   <div>tes 4</div>
</div>

CSS

/* the actual CSS to make them evenly spaced: */

#container {
    display: flex;
    justify-content: space-between;
}


/* just some presentational styles: */

#container {
    border: 1px solid rgb(41, 41, 41);
}

#container div {
    width: 50px;
    height: 50px;
    background: rgb(30, 156, 136);
    border-color: rgb(41, 41, 41);
    border-width: 0 1px;
    border-style: solid;
    padding-left: 10px;
    padding-right: 10px;
}

#container div:first-child {
    border-left: 0;
}

#container div:last-child {
    border-right: 0;
}