JSFiddle - React, Tailwind, and code Playground

by WizardCoder

HTML

<div class="container">
  <div class="left">
  
  </div>
  <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 class="right">
  
  </div>
</div>

CSS

html { margin: 0; padding: 0; }
body { background-color: white; margin: 0; padding: 0; }

.container {
  display: flex;
}

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

.left, .right {
  flex: 1 0 auto;
}

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

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

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

img {
  max-width:100%;
  height:auto;
}