JSFiddle - React, Tailwind, and code Playground

by shincurry

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta https-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="row content">
        <div class="col-xs-3">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1617791160588-241658c0f566?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1859&q=80">
            </div>
        </div>
        <div class="col-xs-3">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1617803675112-12b25461ec3c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=975&q=80f">
            </div>
        </div>
        <div class="col-xs-3">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1617798087281-c1a1b8784ce9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80">
            </div>
        </div>
        <div class="col-xs-3">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1614769507625-943536e3b989?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2378&q=80">
            </div>
        </div>

        <div class="col-xs-3">
            <div class="img-container">
                <img src="https://images.unsplash.com/photo-1617208281621-bb81904321df?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2378&q=80">
            </div>
        </div>
        <div class="col-xs-3">
            <div class="img-container">
                <img...

CSS

.content {
  margin: 6px;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  background-color: cadetblue;
  margin: 1px;
}