JSFiddle - React, Tailwind, and code Playground

by ZooeyLai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.8.4/lazyload.min.js"></script>
    <div class="wrap">
        <div class="container">
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/176/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/143/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/236/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/225/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/134/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/213/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/237/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/227/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy lazy-img" 
                data-src="https://picsum.photos/id/137/1200/500" 
                alt="">
            </figure>
            <figure>
                <img alt="A lazy image" class="lazy...

CSS

.container{
        width: 60%;
        margin: 0 auto;
    }
    img{
        max-width: 100%;
    }
    .lazy-img{
        max-width: 100%;
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        border-radius: 0.875rem;
    }

JavaScript

var lazyLoadInstance = new LazyLoad({
        // Your custom settings go here
        
        });