JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS

body{
    text-align: center;
}

.parent
{
    text-align: left;
    background-color: yellow;
    display: inline-block; /*Retreives total width value of all child divs*/
    font-size: 0;
    /*How could I center this div? I used to do: margin-left: auto; margin-right: auto;
    however for this I need to assign a fixed width. I want to assign the width of the
    content inside the div.*/
}

.child
{
    height: 100px;
    width: 100px;
    border: 1px solid red;
    display: inline-block;
}