JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<hr>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;640&quot; width=&quot;1920&quot;></svg>" alt="Placeholder Image" sizes="100vw"></picture>
<hr>

<hr>
<picture>
  <source srcset="https://picsum.photos/640/160.webp 640w, https://picsum.photos/768/192.webp 768w, https://picsum.photos/1024/246.webp 1024w, https://picsum.photos/1368/342.webp 1366w, https://picsum.photos/1600/400.webp 1600w, https://picsum.photos/1920/480.webp 1920w" type="image/webp" sizes="100vw">
  <source srcset="https://picsum.photos/640/320 640w, https://picsum.photos/640/320 768w, https://picsum.photos/640/320 1024w, https://picsum.photos/640/320 1366w, https://picsum.photos/640/320 1600w, https://picsum.photos/640/320 1920w" sizes="100vw">
  <img src="data:image/svg+xml;utf8,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; height=&quot;640&quot; width=&quot;1920&quot;></svg>" alt="Placeholder Image"zzzzzzz>
</picture>
<hr>

CSS

picture, img {
  width: 100%;
  display: block;
}