JSFiddle - React, Tailwind, and code Playground

by WizardCoder

HTML

<div class="container">
  <div class="center">
    <div class="content">
      <h1>Example</h1>
      <p>
        This example should demonstrate the problem with chrome (or webkit?) based browsers with browser zoom.
      </p>
      <p>
        To see the problem, zoom out this page (&lt; 50%) and you should see the following:
      </p>
      <ul>
        <li>The rem-based layout stops scaling down, but the content inside it continues to scale.</li>
        <li>The borders get separated from their backgrounds when using rems. (Adjust the width of the viewport to see this one once zoomed out).</li>
      </ul>
      <img src="https://i.imgur.com/2LxSZxE.gif" alt="Ahhh!" />
    </div>
  </div>
</div>

CSS

html { margin: 0; padding: 0; font-size:100%; }
body { background-color: white; margin: 0; padding: 0; }

ul {
  padding-left:2.5em;
}

.container {
  display: flex;
}

.content {
  padding: 1em;
  box-sizing: border-box;
}

.center {
  width: 52em;
  background-color: #aae;
}

.left { 
  border-right: 0.2em solid black; 
  background: linear-gradient(-90deg, rgba(0,0,0,0.5) 0em, rgba(0,0,0,0) 10em) right repeat-y;
}

.right { 
  border-left: 0.2em solid black; 
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 0em, rgba(0,0,0,0) 10em) left repeat-y;
}

img {
  width:31.25em;
  height:auto;
}

p {
  font-size:1em;
}