JSFiddle - React, Tailwind, and code Playground

HTML

<img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_1400.jpg 1400w,
               https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_700.jpg 700w,
               https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_400.jpg 400w"
       sizes="(min-width: 700px) 700px, 100vw"
       alt="A woman reading">

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: 20px;
}

article {
  margin: 0 auto;
  max-width: 700px;
}

JavaScript

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
alert ("Viewport width: " + w + "px");