JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, reprehenderit?</p>

<picture class="">
  <source
          data-sizes="auto"
          data-srcset="
          https://picsum.photos/640/160.webp 640w,
          https://picsum.photos/1024/256.webp 1024w,
          https://picsum.photos/1440/360.webp 1440w,
          https://picsum.photos/1920/480.webp 1920w"
          type="image/webp"
          />
  <img
       src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="480" width="1920"></svg>'
       class="lazyload "
       data-sizes="auto"
       data-srcset="
       https://picsum.photos/640/160 640w,
       https://picsum.photos/1024/256 1024w,
       https://picsum.photos/1440/360 1440w,
       https://picsum.photos/1920/480 1920w"
       alt="The relevant alt text here"
       />
</picture>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, voluptatum!</p>

CSS

img {
  width: 100%;
}

picture {
  border: 1px solid;
  display: block;
  width: 100%;
}