JSFiddle - React, Tailwind, and code Playground

by Robert Henniger

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/plugins/rias/ls.rias.min.js"></script>


<div class="image">
  <picture>
  <!--[if IE 9]><audio><![endif]-->
  <source data-src="https://placehold.it/{width}x{height}/FF0000/fff"
        media="(min-width: 800px)" data-aspectratio="1.3"/>
  <source data-src="https://placehold.it/{width}x{height}/ff8c00/fff"
        media="(min-width: 550px)" data-aspectratio="0.75"/>

  <source
      data-src="https://placehold.it/{width}x{height}/FFFF00/000000"
      media="(min-width: 300px)" data-aspectratio="1" />


  <!--[if IE 9]></audio><![endif]-->
  <img
      src="https://placehold.it/100"
      data-src="https://placehold.it/{width}x{height}/CCCCCC/FF0000"
      data-sizes="auto"
      data-widths="[1000,800,600,500,400,300]"
      class="lazyload"
      data-aspectratio="0.666666"
      alt="" />
  </picture>
</div>

CSS

img {
	width:100%;
  max-width:100%;
  display:block;
}

.image{
  max-width:100%;
  margin:auto;
} 

@media screen and (min-width: 550px) {
  .image{
    max-width:70%;
  } 
}

@media screen and (min-width: 800px) {
  .image{
    max-width:80%;
  } 
}