JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <!-- float the collection of articles inline
       with the text-align center and the placeholders //-->
  <div class="position-inline">
    <div class="collapse-to-content">
      <article>a</article>
      <article>b</article>
      <article>c</article>    
      <article>d</article>
      <article>e</article>
    </div>
  </div>
  <!-- number of placeholders should match articles
       basically these mimic the articles, supplying
       the centered width; whilst the articles can
       float keeping their left-alignment. //-->
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

CSS

/**
 * zero font-size and line-height to get around display: inline-block 
 * whitespace issues. This could be removed if you take out the whitespace
 * in your markup. Then we text-align center to center the articles and
 * placeholders.
 */
.container {
  font-size: 0;
  line-height: 0;
  text-align: center;
}

/**
 * Both placeholder and article should size the same on the horizontal 
 * this is because placeholder holds the place for where the articles
 * need to layout.
 */
.placeholder {
  display: inline-block;
  width: 200px;
  margin: 0 5px;
  height: 0;
}

/**
 * I'm using article here but it could be anything
 * with a defined width.
 */
article {
 font-size: 12pt;
 line-height: 1.2em;
 float: left;
 margin: 5px;
 width: 200px;
 height: 100px;
 background: red;   
}

/**
 * Place the element as if it were an inline block.
 * This is used to group .position-inline and .placeholder
 * elements together in the text-align: center rendering.
 */
.position-inline {
  display: inline-block;
  min-width: 210px; /*article width + article padding*/
}

/**
 * As far as I can see the only way to get a system of floats
 * to collapse to their horizontal width (in this scenario) is
 * to use position: absolute. Usual other collapse methods do
 * not seem to work where a float can wrap.
 */
.collapse-to-content {
  position: absolute;
}