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,
		 					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,
		 					https://placehold.it/1200x600 1200w"
					 data-sizes="auto" >
			</div>
		</div>
	</div>

CSS

.lazyload,
.lazyloading {
    opacity: 0;
}

.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}