JSFiddle - React, Tailwind, and code Playground

by slphd

HTML

<script src="https://afarkas.github.io/lazysizes/lazysizes.min.js"></script>

<div class="group">
		<div class="group-item">
			<div class="imagecontainer">
				<img class="imagecontainer-img lazyload"
					 data-srcset="https://placehold.it/800x400 800w,
							https://placehold.it/1200x600 1200w"
					 data-sizes="auto" >
			</div>
		</div>

		<div class="group-item">
			<div class="imagecontainer">
				<img class="imagecontainer-img lazyload"
					 data-src="https://placehold.it/800x400" >
			</div>
		</div>


		<div class="group-item">
			<div class="imagecontainer is-round">
				<img class="imagecontainer-img lazyload"
					 data-srcset="https://placehold.it/500x700 500w 700h,
		 					https://placehold.it/643x900 643w"
					 data-sizes="auto" >
			</div>
		</div>

		<div class="group-item">
			<div class="imagecontainer is-round">
				<img class="imagecontainer-img lazyload"
					 data-srcset="https://placehold.it/800x400 800w 400h,
		 					https://placehold.it/1200x600 1200w"
					 data-sizes="auto" >
			</div>
		</div>
	</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

.imagecontainer {
  position: relative;
  border: 3px solid #ccc;
  overflow: hidden;
  transform: translateZ(0);
}

.imagecontainer:before {
  display: block;
  width: 100%;
  content: "";
  padding-bottom: 62%;
  height: 0;
}

.imagecontainer-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  transition: transform 0.1s;
}

.imagecontainer.is-round {
  border-radius: 50%;
}

.imagecontainer:hover .imagecontainer-img {
  transform: scale(1.1);
}

.group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.group-item {
  width: 50%;
  padding: 10px
}