JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<picture>
	<source
		media="(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 2dppx)"
    sizes="(min-width: 640px) 320px, 100vw"
		srcset="
			https://dummyimage.com/320x180/000/FFF.png?text=320+✕+180+2x 320w,
			https://dummyimage.com/640x360/000/FFF.png?text=640+✕+360+2x 640w,
			https://dummyimage.com/1280x720/000/FFF.png?text=1280+✕+720+2x 1280w,
			https://dummyimage.com/2560x1440/000/FFF.png?text=2560+✕+1440+2x 2560w,
			https://dummyimage.com/5120x2880/000/FFF.png?text=5120+✕+2880+2x 5120w
		"
	/>
	<source
    sizes="(min-width: 640px) 320px, 100vw"
		srcset="
			https://dummyimage.com/320x180/000/FFF.png?text=320+✕+180+1x 320w,
			https://dummyimage.com/640x360/000/FFF.png?text=640+✕+360+1x 640w,
			https://dummyimage.com/1280x720/000/FFF.png?text=1280+✕+720+1x 1280w
		"
	/>
	<img src="https://dummyimage.com/640x360/000/FFF.png?text=default" width="640" height="360" />
</picture>

CSS

img {
	max-width: 640px;
	width: 100%;
	height: auto;
}