JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<picture>
  <source media="(orientation: landscape)" srcset="land-small-test-image.avif 200w,
                                      land-medium-test-image.avif 600w,
                                      land-large-test-image.avif 1000w" sizes="400px, 100vw">

  <source media="(orientation: landscape)" srcset="
                                      land-small-test-image.jpg 200w,
                                      land-medium-test-image.jpg 600w,
                                      land-large-test-image.jpg 1000w" sizes="400px, 100vw">

  <source media="(orientation: portrait)" srcset="port-small-test-image.avif 700w,
                                      port-medium-test-image.avif 1200w,
                                      port-large-test-image.avif 1600w" sizes="600px, 500px">

  <source media="(orientation: portrait)" srcset="
                                      port-small-test-image.jpg 700w,
                                      port-medium-test-image.jpg 1200w,
                                      port-large-test-image.jpg 1600w" sizes="600px, 500px">

  <img src="land-medium-test-image.jpg" alt="A car">
</picture>