JSFiddle - React, Tailwind, and code Playground

by johnny890118

HTML

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://plus.unsplash.com/premium_photo-1673970474453-7c49815647ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1680037402002-ddb42db4d9a7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1679238391464-295a8f5597f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1680034200933-09075ddb0843?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1679651029984-26fcc8efe993?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1679629594592-914b379b6c5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1679478562104-d1115a0a7253?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<img alt="A lazy image" class="lazy" data-src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<img alt="A...

CSS

*{
  box-sizing: border-box;
}

img{
  width: 100%;
}

JavaScript

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