JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="container">
	<div class="container__content">
		<h3>Hello</h3>
		<div class="band"></div>
	</div>
</div>

CSS

.container {
	--max-width: 600px;
	--offset: calc((100% - var(--max-width, 0)) / 2);
}

.container__content {
	max-width: var(--max-width);
	margin: 0 auto;
}

.band {
	margin: 0 calc(var(--offset, 0) * -1);
	min-height: 200px;
	background: red;
}