JSFiddle - React, Tailwind, and code Playground

by mikapon

HTML

<section>
  <div class="container">
    <h1>test</h1>
    <h2>test2</h2>
  </div>
</section>

CSS

section {
  width: 100%;
  height: 100%;
  background: gray;
}

.container {
  max-width: 300px;
  position: relative;
  background: white;
  margin: 0 auto;
  min-height: 100vh;
}

.container h1 {
  position: relative;
  background: #CCC;
  width: calc(100% + calc(100vw - 334px) / 2);
}

.container h2 {
  position: relative;
  background: #CCC;
  width: calc(100% + calc(100vw - 334px) / 2);
  left: calc(calc(calc(100vw - 334px) / 2) * -1);
}