JSFiddle - React, Tailwind, and code Playground

HTML

<footer class="footer">
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer-main">
        Текст
    </div>
</footer>

CSS

.footer {
    height: 200px;
    position: relative;
}

.footer .left,
.footer .right {
    position: absolute;
    width: 50%;
    height: 200px;
    top: 0;
}

.footer .left {
    left: 0;
    background-image: linear-gradient(to top, #fdb31e, #fed428);
}

.footer .right {
    right: 0;
    background-image: linear-gradient(to top, #df790b, #fed428);
}

.footer-main {
    width: 960px;
    height: 200px;
    z-index: 2;
    position: relative;
    background: #ccc;
    margin: auto;
}