JSFiddle - React, Tailwind, and code Playground

by Federico Tibaldo

HTML

<div class="row">
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/1/200/300" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/2/300/400" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/3/300/200" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/4/400/300" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/5/200" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/6/600/800" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/7/600/800" />
            </div>
        </div>
    </div>
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div class="image">
                <img src="https://picsum.photos/seed/8/800/600" />
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col col-xs-12 col-sm-6 col-md-4">
        <div class="square-wrapper">
            <div...

CSS

/* Assumed Styles */

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 100% 0 1;
}

.col-xs-12 {
  max-width: 100%;
}

@media all and (min-width: 320px) {
  .col-sm-6 {
    max-width: 50%;
  }
}

@media all and (min-width: 768px) {
  .col-md-4 {
    max-width: 33.33%;
  }
}

img {
  width: 100%;
}

/* Styles To Add */

.square-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 100%;
}

.square-wrapper .ant-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.square-wrapper .ant-image {
  position: absolute;
  width: 100%;
  height: 100%;
}