JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="entries-wrapper">
  <div class="entry">
    <img class="logo" src="/src/img/logo-1.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-2.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-3.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-4.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-5.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-6.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-7.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-8.svg">
  </div>
  <div class="entry">
    <img class="logo" src="/src/img/logo-9.svg">
  </div>
</div>

CSS

.entries-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.entry {
    flex: 0 0 33.33%;
    margin: 0 0 38px !important;
}

.entry:nth-child(3n+2) img {
   margin-left:auto;
   margin-right:auto;
   background: red;
}