JSFiddle - React, Tailwind, and code Playground

by Florence Maurice

HTML

<div>
  max-width: 600px;<br>
  width: 400px;<br>
</div>
<div>
  max-width: 400px;<br>
 width: 600px;<br>
</div>
<div> margin: 0 auto;<br>
  max-width: calc(100% - 3em);<br>
  width: 800px;
</div>

CSS

* {
      margin: 0;
      padding: 0;
    }
    div {
      background: #75a2aa;
      padding: 2em 0;
      margin: 1em auto;
    }
    div:nth-child(1){
      max-width: 600px;
      width: 400px;
    }
    div:nth-child(2){
      max-width: 400px;
      width: 600px;
    }
    div:nth-child(3){
      margin: 0 auto;
      max-width: calc(100% - 3em);
      width: 800px;
    }