JSFiddle - React, Tailwind, and code Playground

HTML

<section class="break home">
        <div class="inner">
            <h2>Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum.
</p>
<a href="#">Read more...</a></p>
        </div>
    </section>

CSS

.break {
           -moz-box-shadow: inset  0  5px 5px -5px rgba(50, 50, 50, 0.75), 
                            inset  0 -5px 5px -5px rgba(50, 50, 50, 0.75);
        -webkit-box-shadow: inset  0  5px 5px -5px rgba(50, 50, 50, 0.75), 
                            inset  0 -5px 5px -5px rgba(50, 50, 50, 0.75);
                box-shadow: inset  0  5px 5px -5px rgba(50, 50, 50, 0.75), 
                            inset  0 -5px 5px -5px rgba(50, 50, 50, 0.75);
        overflow: hidden;
        width: 100%;
        height: 410px;
    margin-top: 50px;
    position:relative;
    }

.break.home .inner {
        background: rgb(225, 112, 75);
        background: rgba(225, 112, 75, .85);
        width: 890px;
        min-height: 186px;
        height: 186px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -128px;
        margin-left: -480px;
        padding: 35px;
        text-align: center;
    }