JSFiddle - React, Tailwind, and code Playground

by superyngo

HTML

<script src="https://unpkg.com/vanilla-lazyload@17.5.0/dist/lazyload.min.js"></script>
  <body>
    <div class="container">
      <img
        data-src="https://picsum.photos/600/600?random=1"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=2"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=3"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=4"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=5"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=6"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=7"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=8"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=9"
        alt="a lazy picture"
        class="lazy"
      />
      <img
        data-src="https://picsum.photos/600/600?random=10"
        alt="a lazy picture"
        class="lazy"
      />
    </div>
  </body>

CSS

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

img,
picture,
svg,
video {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  font: inherited;
}

html {
  color-scheme: dark light;
}

body {
  min-height: 100svh;
  background-color: #161221;
}

.container {
  width: 600px;
  margin: 20px auto;
  position: relative;
}

img {
  margin: 20px;
  border: 5px solid white;
  border-radius: 5px;
  transition: filter 200ms;
  cursor: pointer;
}

img:hover {
  filter: brightness(0.8);
}

JavaScript

var lazyLoadInstance = new LazyLoad({});

console.log(lazyLoadInstance);