JSFiddle - React, Tailwind, and code Playground

by webcrunch

HTML

<div class="brands">
  <div class="brand  align-items-center justify-content-center d-flex">
    <img src="typo3conf/ext/webcrunch_sitepackage/Resources/Public/Images/brands/Logo_Bull-Vodka_RGB.svg" alt="">
  </div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="clear"></div>
</div>
<div class="brands">
  <div class="brand">

  </div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="brand"></div>
  <div class="clear"></div>
</div>

SCSS

$theme_dark: #050517;

.brand {
  position: relative;
  width: calc((100% / 4) - 90px);
  height: 200px;
  background-color: blue;
  z-index: 0;
  float: left;
  padding: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
  &:nth-child(4n) {
    margin-right: 0 !important;
  }
  &::after,
  &::before {
    content: "";
    width: 50px;
    height: 50px;
    background-color: pink;
    position: absolute;
    z-index: -1;
  }
  &::before {
    z-index: -1;
    top: -10px;
    left: -10px;
    border-top: 0px solid $theme_dark;
    border-left: 0px solid $theme_dark;
  }
  &::after {
    bottom: -10px;
    right: -10px;
    border-bottom: 0px solid $theme_dark;
    border-right: 0px solid $theme_dark;
  }
}