JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="width:96px; background-color: gray;">
    <div class="centermax" style="background-color: blue; width: 30px; height: 20px"></div>
    <div class="centermax" style="background-color: green; width: 40px; height: 20px"></div>
    <div class="centermax" style="background-color: yellow; width: 20px; height: 20px"></div>
    <div class="centermax" style="background-color: red; width: 25px; height: 20px"></div>
</div>

CSS

#container {
    text-align: center;
}

.centermax {
    display: inline-block;
}