JSFiddle - React, Tailwind, and code Playground

HTML

<div class="full-page-width">
    <div class="center-content-container">
        <div class="content-container">
            <div class="content">Regular Content</div>
        </div>
        <div class="extended-content-container">
            <div class="extended-content">Extended Content</div>
        </div>
    </div>
</div>

CSS

.full-page-width {
    width: 100%;
    overflow: hidden;
    background-color:#ccc;
    height: 500px;
}
.center-content-container {
    width:260px;
    height:400px;
    margin: 0 auto;
    background-color:#aaa;
    padding:30px;
}
.content-container {
    width: 100%;
    background-color:#777;
    padding: 20px 0;
}
.extended-content-container {
    width: 500%;
    margin-left: -200%;
    background-color:#777;
    padding: 20px 0;
}
.content {
    width:100%;
    height: 100px;
    background-color:#ec008b;
    text-align:center;
}
.extended-content {
    width:100%;
    height: 100px;
    background-color:#ec008b;
    text-align:center;
}