JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div style="display:flex;  flex-direction: row; justify-content: center;">
  <div style="flex:1">
      <img
        sizes="50vw"
        srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&auto=format&col=1 1024w,
                https://assets.imgix.net/unsplash/bridge.jpg?w=900&auto=format&col=1 900w,
                https://assets.imgix.net/unsplash/bridge.jpg?w=480&auto=format&col=1 480w"
        src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&auto=format&col=1"
      >
  </div>
  <div style="flex:1">
     <img
        sizes="50vw"
        srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&auto=format&dpr=1 1024w,
                https://assets.imgix.net/unsplash/bridge.jpg?w=1024&auto=format&dpr=2 2048w,
                https://assets.imgix.net/unsplash/bridge.jpg?w=900&auto=format&dpr=1 900w,
                https://assets.imgix.net/unsplash/bridge.jpg?w=900&auto=format&dpr=2 1800w,
                https://assets.imgix.net/unsplash/bridge.jpg?w=480&auto=format&dpr=1 480w",
                https://assets.imgix.net/unsplash/bridge.jpg?w=480&auto=format&dpr=2 860w"
                
        src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&auto=format&col=2"
      >
      
     </div>
</div>

    <img
            srcset="https://atoms.imgix.net/web/{{ imgix_url }}?w=1024&auto=format&dpr1 1024w,
                https://atoms.imgix.net/web/{{ imgix_url }}?w=480&auto=format&dpr=1 480w,
                https://atoms.imgix.net/web/{{ imgix_url }}?w=480&auto=format&dpr=2 960w",
            src="https://atoms.imgix.net/web/{{ imgix_url }}?w=640&auto=format&dpr=1">