JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="the-magic">
  <h1>the magic</h1>
</div>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quisquam. Beatae ratione nihil amet, nulla rem quis architecto hic possimus vero. Non maxime, perspiciatis dolor qui saepe quaerat explicabo at.</p>
</div>

SCSS

body, html { padding: 0; margin: 0 }

$container-width: 1200px;

.container {
    width: 100%;
    max-width: $container-width;
    padding: 0 1rem;
    margin: 0 auto;
}

.the-magic {
  background-color: #f0f4;
  max-width: calc(50% + #{$container-width/2});
  margin-left: auto;
}