JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<div class="brands">
  <ul class="brands__inner">
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
    <li class="brands__item"><a href="" class="brands__link"></a></li>
  </ul>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.brands {
  padding: 1px;
  max-width: 500px;
  margin: 50px auto 0;
}

.brands__inner {
  display: flex;
  flex-wrap: wrap;
  margin: -1px;
  padding: 0;
  list-style: none;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 10%, #000 25%, #000 75%, transparent 90%, transparent 100%),
    linear-gradient(180deg, transparent 0%, transparent 10%, #000 25%, #000 75%, transparent 90%, transparent 100%);
  background-size: 100% calc(50% + 6px), calc(50% + 6px) 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.brands__item {
  flex-basis: calc(25% - 2px);
  margin: 1px;
  padding: 10px;
  background-color: #fff;
}

.brands__link {
  display: block;
  padding-top: 75%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ccc'%3E%3Ccircle cx='15.5' cy='9.5' r='1.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-5-6c.78 2.34 2.72 4 5 4s4.22-1.66 5-4H7z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}